Flutter Todo Uygulaması üzerinde Search özelliği oluşturmak

 Merhabalar arkadaşlar;

 Flutter serisine devam ediyoruz. Önceki yazımızda sizlere Flutter Hive Depolama yöntemi anlatmıştık.

 Aynı proje üzerinde bu sefer liste içerisinde search(Arama) özelliği ile belirtilen görev(task) var mı yok mu kontrolü sağlamak ve geçerli görev(task) üzerinde normal crud işlemlerini nasıl yaparız ona değineceğiz. 

Return ettiğimiz Scaffold nesnesi  içerisinde appbar: Appbar içerisinde liste olarak [] iconButton nesneleri gönderiyoruz. Iconbutton üzerinde wrap widgets diyerek gestureDetector ile onTab özelliğini aktif ediyoruz. Yani kısaca kod ekranını paylaşırsak;

appBar: AppBar(

        title: GestureDetector(

          onTap: () {

            _showADdTaskBottomSheet(context);

          },

          child: const Text(

            'Genmot Görev Takip Uygulaması',

            style: TextStyle(color: Colors.black),

          ),

        ),

        centerTitle: false,

        actions: [

          IconButton(

            onPressed: () {

              _showSearchPage();

            },

            icon: Icon(Icons.search),

          ),

          IconButton(

            onPressed: () {

              _showADdTaskBottomSheet(context);

            },

            icon: Icon(Icons.add),

          ),

        ],

      ),

IconButton'un onpressed  özelliğinin içerisine _showSearchPage diye bir local method tanımlıyoruz. Bu method sayesinde bize flutter tarafından showSearch hazır methodunu kullanıma sade bir kod bloğu sağlamış oluyoruz.

 _showSearchPage() async {

    await showSearch(

        context: context, delegate: CustomSearchDelegate(allTask: _allTask));

    _getAllTaskDb();

  }

Bu kod bloğunda  showSearch ile CustomSearchDelegate methoduna çağrışım da bulunuyoruz. Bu asenkron çalışması gereken bir method olduğu için async ve await eklemeyi unutmuyoruz arkadaşlar. Widgets klasörümüze custom_delegate.dart diye yeni bir class oluşturuyoruz ve bu class nesnesini SearchDelegate nesnesinden extends ediyoruz.

class CustomSearchDelegate extends SearchDelegate {}

Klasör ağaç yapımız da bu şekilde olduktan sonra CustomSearchDelegate class extends sonrası build edilmesi gereken 4 method ile beraber geliyor arkadaşlar bunları da doldurtuktan sonra güzel bir search butonuna sahip olacağız.

Peki 4 adet build edilecek olan methodlar neler onları kısaca açıklayalım.

1. Build Actions;

  @override

  List<Widget>? buildActions(BuildContext context) {

    // TODO: implement buildActions

    //Arama kısmında ki sağ taraftaki iconları kontrol etmek için kullanılıyor.

    return [

      IconButton(

          onPressed: () {

            query.isEmpty ? null : query = '';

          },

          icon: Icon(Icons.clear))

    ];

  }

Burası arkadaşlar arama kısmında görünecek butonların  veya iconların olduğu alandır.

2. Build Leading;

  @override

  Widget? buildLeading(BuildContext context) {

    // TODO: implement buildLeading

    // en baştaki iconları

    return GestureDetector(

      onTap: () {

        close(context, null);

      },

      child: Icon(

        Icons.arrow_back_ios,

        color: Colors.black,

        size: 24,

      ),

    );

  }

Burası da icon veya button olarak geri işlemleri için uygulama yapılacak alanı işaret ediyor. Kod bloğunda da yaptığımız gibi arrow_back_ios diyerek geri button işareti sağlamış oluyoruz. Material düzeninize bağlı olarak icon renklendirmesi de yapabilirsiniz. O sizin tasarım zevkinize bağlıdır.

3. Build Result

@override

  Widget buildResults(BuildContext context) {}

Arama sonucunda gösterim yapılacak methodları buraya entegre ediyoruz. Arama yapıldıktan sonra geriye dönecek widgets burada return ederek material tasarımımızı tamamlamış oluyoruz.

4. Build Suggestions

 @override

  Widget buildSuggestions(BuildContext context) {}

Arama konusunda daha hassas bir yapı oluşturmak için bu alanda harf duyarlılığı üzerinde arama sonuçlarını göstermek istersek bu alanda return ettiğimiz yapıları buraya entegre ediyoruz.

Buraya kadar ki kısım SearchDelegate bize sağladığı kolaylıkları içeriyordu ve crud işlemleri için Hive Depolama yönteminde yaptığımız kurucu yapıları return ettiğimiz nesneler içerisinde çağırarak sonuca basit şekilde ulaşacağız arkadaşlar.

Delete Operasyonu için;

Öncelikle global olarak CustomSearchDelegate class'ına ana ekranımızdan çekili olan listeyi göndermek için List<allTask> bekleyecek şekilde tanımlama yapıyoruz. Sonrasında bu alanı required olarak tanımlayarak boş geçilme durumunu ortadan kaldırıyoruz.

final List<Task> allTask;

  CustomSearchDelegate({required this.allTask});

home_page.dart => içerisinde çağırırken local method olarak;

 _showSearchPage() async {

    await showSearch(

        context: context, delegate: CustomSearchDelegate(allTask: _allTask));

    _getAllTaskDb();

  }

Required alanları CustomSearchDelegate iletiyoruz.

    List<Task> filteredList = allTask

        .where((task) => task.name.toLowerCase().contains(query.toLowerCase()))

        .toList();

Sonrasında allTask üzerinde where komutuyla aramalarımızı hepsini lowerCase olacak şekilde ayarlayıp sonucu ekrana liste halinde bastırıyoruz.

Gelelim listelenmiş ve arama sonucunda ekrana gelen görev(task) içerisinde delete işlemi için onDismissed () => içerisinde;

 onDismissed: (direction) async {

                    filteredList.removeAt(index);

                    await locator<LocalStorage>()

                        .deleteTask(task: _oAnkiEleman);

                  },

Main methodu içerisinde singelton olarak tanımladığımız locator nesnesini çok uğraşmadan asenkron olarak çağırarak deleteTask(task: _oankiEleman) ile delete işlemi tamamlamış oluyoruz.

Güncelleme işlemleri için;

task_list_item.dart class içerisinde gerçekleştiriyoruz  bütün süreçlerimizi hem widgets üzerinde geziniyoruz ve bu sayede kod karmaşasından ve stabil çalışan bir uygulama yapmış oluyoruz arkadaşlar.

Zaten burası kendi başına bir stateful widget olduğu için kendi içerisinde süreçleri tekrar build ediyor her setState() ettiğimizde searchDelegate için ayrı bir method tanımlaması yapmamıza gerek kalmadan süreci tamamlamış oluyoruz.

   _localStorage.updateTask(task: widget.task);

            setState(() {});

Evet arkadaşlar bir yazımızın daha sonuna geldik. En son olarak bu projeye Easy location ekleyerek dil yapılandırması yapmak istiyorum. Onu da bu yazı içerisine eklemek istemedim kafa karışıklığı ve hizmet ettiği alan sınırlı olsun diye bir sonraki yazıda görüşmek üzere...

İyi kodlamalar...