Selamat datang di blog ali-mahdali.blogstpot.com, kali ini penulis memposting artikel yang berjudul MEMBUAT WIDGET SEARCHBLE LISTVIEW | FLUTTER yang mana artikel ini dapat kalian akses melalui alamat : https://ali-mahdali.blogspot.com/2021/07/membuat-widget-searchble-listview.html,
tanpa basa-basi yuk disimak artikelnya dibawah ini. Selamat membaca
kali ini abang akan memberikan script membuat widget listview yang langsung bisa di filter menggunakan fitur ValueListenableBuilder, berikut ini penampakannya:
Widget searchableUsersWidget() {
List<Map> users = [
{'name': 'James', 'tel': '9010'},
{'name': 'Michael', 'tel': '9011'},
{'name': 'Jane', 'tel': '9013'},
];
ValueNotifier<List<Map>> filtered = ValueNotifier<List<Map>>([]);
TextEditingController searchController = TextEditingController();
FocusNode searchFocus = FocusNode();
bool searching = false;
return ValueListenableBuilder<List>(
valueListenable: filtered,
builder: (context, value, _) {
return Container(
margin: const EdgeInsets.only(top: 10),
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.5),
spreadRadius: 4,
blurRadius: 6,
offset: const Offset(0, 3), // changes position of shadow
),
],
),
child: Column(
children: [
Container(
margin: const EdgeInsets.all(8),
child: Card(
child: ListTile(
leading: const Icon(Icons.search),
title: TextField(
controller: searchController,
decoration: const InputDecoration(
hintText: 'Search', border: InputBorder.none),
onChanged: (text) {
if (text.isNotEmpty) {
searching = true;
filtered.value = [];
for (var user in users) {
if (user['name']
.toString()
.toLowerCase()
.contains(text.toLowerCase()) ||
user['tel'].toString().contains(text)) {
filtered.value.add(user);
}
}
} else {
searching = false;
filtered.value = [];
}
},
),
trailing: IconButton(
icon: const Icon(Icons.cancel),
onPressed: () {
searchController.clear();
searching = false;
filtered.value = [];
if (searchFocus.hasFocus) searchFocus.unfocus();
},
),
),
),
),
Expanded(
child: ListView.builder(
itemCount: searching ? filtered.value.length : users.length,
itemBuilder: (context, index) {
final item =
searching ? filtered.value[index] : users[index];
return ListTile(
title: Text(item['name']),
subtitle: Text(item['tel']),
onTap: () {},
);
}),
),
],
),
);
});
}
Terimakasih atas kunjungan Anda dan Karena telah sudi membaca artikel yang berjudul MEMBUAT WIDGET SEARCHBLE LISTVIEW | FLUTTER.Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar di bawah. Anda boleh menyebarluaskan atau mengcopy artikel MEMBUAT WIDGET SEARCHBLE LISTVIEW | FLUTTER ini jika memang bermanfaat bagi anda, namun jangan lupa untuk mencantumkan link sumbernya. Terima Kasih, Happy Blogging :)
EmoticonEmoticon