Cara Mudah Membuat Fitur Pencarian ListView di Flutter

Share:
Cara Mudah Membuat Fitur Pencarian ListView di Flutter
Halo semuanya, kembali lagi di saheretech. Blog programming kesayangan kita semua. Kali ini kita akan membahas bagaimaan cara membuat form pencarian dan menampilkan hasil pencariannya di flutter. Penasaran?, ayo ikuti selengkapnya di bawah ini.


Beberapa waktu yang lalu saya sudah membuat artikel cara switch/berganti layout dari listview ke gridview dan sebaliknya di link berikut ini https://www.sahretech.com/2022/02/cara-switch-tampilan-dari-listview.html. Nah itu adalah salah satu contoh penggunaan statefulwidget yang bisa kita lakukan. Stateful widget sangat berguna untuk membuat aplikasi yang memiliki perubahan secara reaktif. Nah kali ini saya akan kembali membahas cara menggunakan stateful widget dalam studi kasus "cara membuat form pencarian".

Jadi pada tutorial kali ini kita akan menampilkan data nama-nama orang, lalu di bagian appbar terdapat icon pencarian, jika diklik maka akan memunculkan form pencarian. Pencarian ini akan bekerja secara reaktif, setiap ada huruf yang ditype, maka list data juga akan ikut berubah.



Cara Membuat Form Pencarian dan Fungsinya di Flutter

1. Buatlah sebuah project baru di visual studio code dengan nama "latihan_form_pencarian".

2. Buatlah sebuah file baru di dalam folder lib, dan beri nama data.dart. Copy script di bawah ini dan paste. Jadi script di bawah ini akan kita gunakan sebagai sumber datanya nanti.
    

List<String> items = [ "Morgan Schultz", "Kassidy Zamora", "Dakota Lester", "Mauricio Estes", "Anton Fowler", "Angelique Cortez", "Michaela Flowers", "Zaiden Cohen", "Tomas Morrison", "Madeleine Carney", "Kaydence Trujillo", "Zion Dickson", "Laney Scott", "Kyleigh Jordan", "Teagan Roach", "Gilbert Rodgers", "Jaylan Ferrell", "Harley Fry", "Brittany Dickson", "Paulina Stanton", "Tyrell Delgado", "Brayden Conner", "Erin Stewart", "Justus Buck", "Jaycee Hancock", "Landon Hutchinson", "Maxim Schmitt", "Aaron Mccarthy", "Mikaela West", "Alexis Wolf", "Isabel Norman", "Delilah Bishop", "Brock Michael", "Aldo Brady", "Renee Harrell", "Conrad Reed", "Griffin Huerta", "Aditya Morgan", "Raegan Prince", "Rayna Curry", ];

3. Buka main.dart lalu ganti isinya dengan script yang ada di bawah ini. Untuk penjelasannya sudah saya sertakan di dalam script dan akan saya breakdown.

    

    // ignore_for_file: use_key_in_widget_constructors, prefer_final_fields, prefer_const_constructors, avoid_function_literals_in_foreach_calls import 'package:flutter/material.dart'; import 'data.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: LatihanPencarian(), ); } } class LatihanPencarian extends StatefulWidget { @override _LatihanPencarianState createState() => _LatihanPencarianState(); } class _LatihanPencarianState extends State<LatihanPencarian> { //untuk mengontroll textfield saat ada perubahan TextEditingController _controllerSearch = TextEditingController(); //data bertipe widget ini mulanya kita buat text. //tapi saat ada perubahan data ini akan berubah menjadi form dan sebalikanya menjadi text Widget? searchTextField = Text("List Users"); //jika false maka tampilkan icon pencarian //jika true maka tampilkan icon panah dan close bool search = false; Color _bgColor = Colors.green; List list = []; @override void initState() { super.initState(); //saat file ini dijalankan pertama kali //maka data list akan diisi dengan data dari data.dart list.addAll(items); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: _bgColor, //title mulanya adalah text title: searchTextField, actions: <Widget>[ //jika search bernilai false maka tampilkan icon search //jika search bernilai true maka tampilkan icon close (search == false) ? IconButton( icon: Icon(Icons.search), onPressed: () { setState(() { searchTextField = appSearch(context); _bgColor = Colors.white; search = true; }); }) : IconButton( icon: Icon( Icons.close, color: Colors.black, ), onPressed: () { setState(() { list.clear(); list.addAll(items); _controllerSearch.clear(); }); }) ], ), body: ListView.builder( itemCount: list.length, itemBuilder: (context, int index) { return ListTile( title: Text( list[index], style: TextStyle(fontSize: 18), ), ); }, ), ); } //saat icon search dijalankan maka widget ini akan dijalankan //widget ini berupa form. Widget appSearch(BuildContext context) { return TextField( controller: _controllerSearch, style: TextStyle(color: Colors.black, fontSize: 18), decoration: InputDecoration( icon: IconButton( icon: Icon( Icons.arrow_back, color: Colors.black, ), onPressed: () { setState(() { searchTextField = Text("List Users"); search = false; _bgColor = Colors.green; _controllerSearch.clear(); list.clear(); list.addAll(items); }); }), hintText: "Search", hintStyle: TextStyle(color: Colors.grey)), // setiap ada perubahan, jalankan fungsi _searchName onChanged: (name) { _searchName(name); }, ); } //fungsi ini akan dijalankan setiap kalian typing/mengetik //fungsi ini akan mencari nama sesuai yang diketikkan _searchName(String name) { if (name.isNotEmpty) { setState(() { list.clear(); //melakukan perulangan/looping items.forEach((item) { //jika list data ada yang mengandung susunan huruf yang dicari //maka masukan ke dalam data list if (item.toLowerCase().contains(name.toLowerCase())) { list.add(item); } }); }); } else { setState(() { list.clear(); list.addAll(items); }); } } }

4. Buka emulator kalian, lalu jalankan aplikasinya. Hasilnya bisa kalian lihat seperti gambar di bawah ini.

Membuat Form Pencarian di Flutter
Hasil Akhir



BerakDown Penjelasan Script di Atas

1. Script di bawah ini mulanya kita gunakan untuk menginisialisasi keadaan awal. Dimana keadaan awal dari aplikasi yang kita bangun memiliki appbar berwarna hijau dengan tulistan List Users, lalu ada icon pencarian di sudut kanan appbar. Semua data ini akan berubah nantinya sesuai dengan keadaanya masing-masing.
    

//untuk mengontroll textfield saat ada perubahan TextEditingController _controllerSearch = TextEditingController(); //data bertipe widget ini mulanya kita buat text. //tapi saat ada perubahan data ini akan berubah menjadi form dan sebalikanya menjadi text Widget? searchTextField = Text("List Users"); //jika false maka tampilkan icon pencarian //jika true maka tampilkan icon panah dan close bool search = false; Color _bgColor = Colors.green; List list = []; @override void initState() { super.initState(); //saat file ini dijalankan pertama kali //maka data list akan diisi dengan data dari data.dart list.addAll(items); }



2. Script ini kita gunakan untuk membuat appbar. Jika search bernilai false maka tampilkan icon pencarian, dan jika true maka tampilkan icon close. Kita juga memasang setState saat icon pencarian dan icon close ditekan. Saat icon pencarian ditekan maka searchTextField akan berubah menjadi widget appsearch, dan jika icon close ditekan maka searchTextField akan berubah menjadi tulisan List Users kembali.
    

appBar: AppBar(     backgroundColor: _bgColor, //title mulanya adalah text title: searchTextField, actions: <Widget>[     //jika search bernilai false maka tampilkan icon search //jika search bernilai true maka tampilkan icon close (search == false) ? IconButton(     icon: Icon(Icons.search), onPressed: () {     setState(() {     searchTextField = appSearch(context); _bgColor = Colors.white; search = true; }); }) : IconButton(     icon: Icon(     Icons.close,     color: Colors.black, ), onPressed: () {     setState(() {     list.clear(); list.addAll(items); _controllerSearch.clear(); }); }) ], ),



3. Widget ini kita gunakan untuk membuat sebuah form pencarian di dalam appbar. Kita buat terpisah karena tampilannya sedikit rumit. Secara garis besar kita membuat textfield yang cukup sederhana. Widget ini akan dijalankan jika data search bernilai false.
  
    

//saat icon search dijalankan maka widget ini akan dijalankan //widget ini berupa form. Widget appSearch(BuildContext context) { return TextField( controller: _controllerSearch, style: TextStyle(color: Colors.black, fontSize: 18), decoration: InputDecoration( icon: IconButton( icon: Icon( Icons.arrow_back, color: Colors.black, ), onPressed: () { setState(() { searchTextField = Text("List Users"); search = false; _bgColor = Colors.green; _controllerSearch.clear(); list.clear(); list.addAll(items); }); }), hintText: "Search", hintStyle: TextStyle(color: Colors.grey)), // setiap ada perubahan, jalankan fungsi _searchName onChanged: (name) { _searchName(name); }, ); }



4. Fungsi ini akan dijalankan saat ada perubahan pada textfield. Saat kalian melakukan typing, list data akan menyesuaikan. Dengan yang dicari.


//fungsi ini akan dijalankan setiap kalian typing/mengetik //fungsi ini akan mencari nama sesuai yang diketikkan _searchName(String name) { if (name.isNotEmpty) { setState(() { list.clear(); //melakukan perulangan/looping items.forEach((item) { //jika list data ada yang mengandung susunan huruf yang dicari //maka masukan ke dalam data list if (item.toLowerCase().contains(name.toLowerCase())) { list.add(item); } }); }); } else { setState(() { list.clear(); list.addAll(items); }); } }



Keren!, sekarang kalian sudah bisa membuat form pencarian secara reaktif dengan menggunakan data dummy. Selanjutnya kalian bisa melakukan improvisasi dengan menggunakan data dinamis api. Jika kalian tertarik untuk membaca tutorial, berikut ini beberapa linknya.



Sekian tutorial kali ini tentang cara membuat form pencarian dan fungsinya pada flutter. Semoga bermanfaat. Jika ada kesulitan silahkan, tanya di kolom komentar atau bertanya langsung di fanspage sahretech. Sekian dan sampai jumpa di tutoral keren lainnya.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik