Assalamualaikum sobat baraja, kali ni mimin akan membagikan tips nih caranya membuat kolom pencarian menggunakan icon search yang dimana ketika di tekan akan muncul textfield dan disana kita bisa mencari data yang kita mau menggunakan flutter
Pertama buat file data.dart untuk menampung data- data nya
List<String> items = [
"Ahmad Yunus",
"Mario Speedwagon",
"Petey Cruiser",
"Anna Sthesia",
"Paul Molive",
"Anna Mull",
"Gail Forcewind",
"Paige Turner",
"Bob Frapples",
"Walter Melon",
"Nick R. Bocker",
"Barb Ackue",
"Buck Kinnear",
"Greta Life",
"Ira Membrit",
"Shonda Leer",
"Brock Lee",
"Maya Didas",
"Rick O'Shea",
"Pete Sariya",
"Monty Carlo",
"Sal Monella",
"Sue Vaneer",
"Cliff Hanger",
"Barb Dwyer",
"Terry Aki",
"Cory Ander",
"Robin Banks",
"Jimmy Changa",
"Barry Wine",
"Wilma Mumduya",
"Buster Hyman",
"Poppa Cherry",
"Zack Lee",
];
Okee di main.dart nya import file data.dart nya , disini kita menggunakan statefulwidget karena kita akan menampilkan tampilannya secara dinamis nanti.
class _LiveSearchState extends State<LiveSearch> {
TextEditingController _controllerSearch = TextEditingController();
Widget searchTextField;
bool search = false;
Color _bgColor = Colors.green;
List list = [];
@override
void initState() {
super.initState();
list.addAll(items);
}
Disana ada controller gunanya untuk mengontrol texfield nya nanti saat ada perubahan, kemudian kita buat deklarasikan sebuah widget kosong yang akan kita isi nanti, kemudian search ini type nya bool supaya kita bisa membuat sebuah pengkondisian nanti, dan deklarasikan list kosong yang nanti nya akan menyimpan data yang kita input nanti.
Kemudian ada method inistate ini adalah method yang akan kita jalankan pertama kali setelah method main. dan disitu variabel list akan menambahkan semua items yang ada di data.dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _bgColor,
title: searchTextField,
actions: <Widget>[
(!search)
? IconButton(
icon: Icon(Icons.search),
onPressed: () {
setState(() {
searchTextField = appSearch(
context);
_bgColor = Colors.white;
search = !search;
});
})
: IconButton(
icon: Icon(
Icons.close,
color: Colors.black,
),
onPressed: () {
setState(() {
list.clear();
list.addAll(items);
_controllerSearch.clear();
});
})
],
),Jadi di dalam appBar itu ada property actions untuk menampilan widget yang ada di sebelah kanan, kemudian ada ternary atau pengkondisian dimana search default nya adalah false dan disitu ada perintah !search yang berarti true karena berkebalikan, maka akan menampilkan icon search.
Kemudian ketika tombol search nya itu di tekan akan melakukan sebuah perubahan maka kita menggunakan setState yang didalam akan menampilkan widget searchTextField yang artinya itu sama dengan yang ada di widget appSearch
kemudian yang semulanya backgroundnya warnanya hijau akan dirubah menjadi putih dan kondisinya berubah menjadi false lagi yang akan menampilkan icon close dan ketika di pencet itu akan membersihkan semua action di dalamnya
body: ListView.builder(
itemCount: list.length,
itemBuilder: (context, int index) {
return ListTile(
title: Text(
list[index],
style: TextStyle(fontSize: 18),
),
);
},
),
);
}Kemudian di dalam body nya disini adala listviewBuilder untuk menampilkan atau menggenerate data nya dalam bentuk listile dan ada teks di list tile nya sesuai dengan index
dan ini adalah widget untuk appsearch nya yang dimana akan menampilkan sebuah texfield yang di kontrol oleh controllerSearch yang isi nya ada icon arrow back nya dan ketika di di pencet akan melakukan perubahan maka kita setState dan texfieldny aakan berubah menjadi tampilan biasa ada teks nya dan backgroundnya berwarna biru
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 = !search;
_bgColor = Colors.blue;
_controllerSearch.clear();
list.clear();
list.addAll(items);
});
}),
hintText: "Search",
hintStyle: TextStyle(color: Colors.grey)),
onChanged: (value) {
_searchName(value);
},
);
}Ataupun jika ada inputan akan di onchanged yang menyimpan si value dalam widget _searchName
_searchName(String value) {
if (value.isNotEmpty) {
setState(() {
list.clear();
items.forEach((item) {
if (item.toLowerCase().contains(name.toLowerCase())) {
list.add(item);
}
});
});
} else {
setState(() {
list.clear();
list.addAll(items);
});
}
}Nahhh di dalam widget _searchName ini adalah saat pencarian nya kita mau ketik apa dalam ini disimpan dalam value nanti di lower case supaya huruf yang kedetek itu kecil semua walaupun yang kita input ada yang kapital kemudian mengandung atau sama gak yang ada di items yang sama di lower case juga jika ada maka akan di tambahkan ke dalam list jika tidak ada maka akan list nya akan di clear
Kurang lebih sourcode nya seperti ni
import 'package:flutter/material.dart';
import 'package:flutter_search/data.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LiveSearch(),
);
}
}
class LiveSearch extends StatefulWidget {
@override
_LiveSearchState createState() => _LiveSearchState();
}
class _LiveSearchState extends State<LiveSearch> {
TextEditingController _controllerSearch = TextEditingController();
Widget searchTextField;
bool search = false;
Color _bgColor = Colors.green;
List list = [];
@override
void initState() {
super.initState();
list.addAll(items);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: _bgColor,
title: searchTextField,
actions: <Widget>[
(!search)
? IconButton(
icon: Icon(Icons.search),
onPressed: () {
setState(() {
searchTextField = appSearch(
context); // Jika fase maka dilaukan set state
_bgColor = Colors.white; //
search = !search; //
});
})
: 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),
),
);
},
),
);
}
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 = !search;
_bgColor = Colors.blue;
_controllerSearch.clear();
list.clear();
list.addAll(items);
});
}),
hintText: "Search",
hintStyle: TextStyle(color: Colors.grey)),
onChanged: (name) {
_searchName(name);
},
);
}
_searchName(String name) {
if (name.isNotEmpty) {
setState(() {
list.clear();
items.forEach((item) {
if (item.toLowerCase().contains(name.toLowerCase())) {
list.add(item);
}
});
});
} else {
setState(() {
list.clear();
list.addAll(items);
});
}
}
}
dan untuk data nya ada di bagian atas silahkan di scrool dan untuk outputnya akan seperti ini
