UDACODING

Posts

Make Searching ListView pada Flutter

Assalammualaikum warahmatullahi wabarakatuu  . . .

Halo Semuaa… Kali ini saya akan berbagi ilmu bagaimana caranya menambah fitur pencarian atau searching di ListView pada Flutter. So, Check It Out ya guys9!!!

1. Buat Project baru dengan nama searching_listview

image-14 Make Searching ListView pada Flutter

2. Tunggu hingga proses selesai

3. Setelah itu edit pada file main.dart.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Search ListView",
home: new SearchListView(),
theme: ThemeData(primaryColor: Colors.blue),
debugShowCheckedModeBanner: false,
);
}
}

Tambahkan data list pada _SearchListView

class SearchListView extends StatefulWidget {
@override
_SearchListViewState createState() => _SearchListViewState();
}

class _SearchListViewState extends State<SearchListView> {
var etSearch = new TextEditingController();
bool firstSearch = true;
String query ="";

List<String> dataList;
List<String> filterList;

@override
void initState() {
// TODO: implement initState
super.initState();

dataList = new List<String>();
dataList = [
"Snake","Elephant","Cats","Dog","Orion","Boomerang","Pelican","Ghost","Eagle","Horse Head","Elephant Trunk","Butterfly"
];
//sort data
dataList.sort();
}

Buat fungsi search listview

_SearchListViewState(){
etSearch.addListener((){
//menambahkan method yang akan dipanggil ketika object ada berubah
if(etSearch.text.isEmpty){
setState(() {
firstSearch = true;
query ="";
});
} else{
//data tidak kosong
setState(() {
firstSearch = false;
query = etSearch.text;
});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Search ListView'),
backgroundColor: Colors.green,
),

body: Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
child: new Column(
children: <Widget>[
//memanggil method untuk view search
_createSearchView(),

firstSearch ? _createListView(): _performSearch()
],
),
),
);
}

Widget _createSearchView(){
return new Container(
decoration: BoxDecoration(
border: Border.all(width: 1.0)
),
child: TextField(
controller: etSearch,
decoration: InputDecoration(
hintText: 'Search',
hintStyle: new TextStyle(color: Colors.green)
),
textAlign: TextAlign.center,
),
);
}
 //widget untuk listview
Widget _createListView(){
return new Flexible(
child: new ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index){
return new Card(
color: Colors.white,
elevation: 5.0,
child: new Container(
margin: EdgeInsets.all(15.0),
child: new Text("${dataList[index]}"),
),
);
}));
}

//membuat widget untuk hasil search
Widget _performSearch(){
filterList = new List<String>();
for(int i=0; i<dataList.length;i++){
var item = dataList[i];

if(item.toLowerCase().contains(query.toLowerCase())){
filterList.add(item);
}
}
return _createFilteredListView();
}

//membuat listview untuk hasil search
Widget _createFilteredListView(){
return new Flexible(
child: new ListView.builder(
itemCount: filterList.length,
itemBuilder: (BuildContext context, int index){
return new Card(
color: Colors.white,
elevation: 5.0,
child: new Container(
margin: EdgeInsets.all(15.0),
child: new Text("${filterList[index]}"),
),
);
}));
}
}

Leave a Reply :

* Your email address will not be published.