Flutter SearchBar || Flutter filter serachbar (pencarian)
Jumat, 04 September 2020
Filter SearchBar Flutter
assalamu'alaikum
oke, kali ini saya akan membuat searchbar menggunakan flutter tentunya teman-teman sudah memiliki perlengkapaya semua ya,
perlengkapan pertama :
- buka editonya, boleh menggunakan android studio ataupun visual studiocode
- buat projectnya dengan mengetikan perintah
flutter create (namaprojectnya)
- setelah project sudah jadi maka akan tampil seperti berikut
oke lanjutkan lagi,
kemudian buka lib => main.dart
hapus sebagian coding default hingga menjadi seperti ini :
setelah jadi buatlah file searchView.dat didalam folder lib => searchview.dart
import 'package:flutter/material.dart';
import 'package:uiGaruda/testProg/result.dart';
class SearchView extends StatefulWidget {
SearchView({Key key}) : super(key: key);
@override
_SearchViewState createState() => _SearchViewState();
}
class _SearchViewState extends State<SearchView> {
var datai = ['a', 'b', 'c'];
TextEditingController editingController = TextEditingController();
final duplicateItems = List<String>.generate(1000, (i) => "Data $i");
// final duplicateItems = List<String>datai=datai();
var data = List<String>();
@override
void initState() {
data.addAll(duplicateItems);
// TODO: implement initState
super.initState();
}
void filterSearchResults(String query) {
List<String> dummySearchList = List<String>();
dummySearchList.addAll(duplicateItems);
if (query.isNotEmpty) {
List<String> dummyListData = List<String>();
dummySearchList.forEach((item) {
if (item.contains(query)) {
dummyListData.add(item);
}
});
setState(() {
data.clear();
data.addAll(dummyListData);
});
return;
} else {
setState(() {
data.clear();
data.addAll(duplicateItems);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SearchView"),
),
body: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: TextField(
onChanged: (value) {
filterSearchResults(value);
// print(duplicateItems);
// showData();
},
onEditingComplete: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Result()));
},
controller: editingController,
decoration: InputDecoration(
hintText: "Serach",
// labelText: "Serach",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: false,
itemCount: data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${data[index]}'),
);
},
),
),
],
),
),
);
}
}
setelah itu coba di run, dan jadi