Beberapa waktu yang lalu saya sudah membuat artikel cara switch/berganti layout dari listview ke gridview dan sebaliknya di link berikut ini https://www.fromsunda.eu.org/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.
 |
| 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.
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.
//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 tulisan saya. Sekian dan sampai jumpa di tutoral keren lainnya.
Posting Komentar