Listview, tidak memiliki batasan dalam menaruh widget di dalamnya. Jika ada banyak widget di dalam list view yang sampai membuatnya melebihi layar handphone, secara otomatis listview akan memanjangakan layar (menggunakan scroll) sesuai banyak widget.
Contoh :
main.dart :
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Search List View',
home: new SearchListView(),
theme: ThemeData(primaryColor: Colors.blue),
);
}
}
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=[
"Buku","Pena","Pensil","Majalah","Ransel","Sepatu","Penggaris","Penghapus",
"Crayon","Kotak Pensil","Handphone","IdCard"
];
//sort data
dataList.sort();
}
_SearchListViewState(){
//menambahkan method yang akan dipanggil ketika object ada berubah
etSearch.addListener(() {
if (etSearch.text.isEmpty){
setState(() {
firstSearch=true;
query="";
});
}else {
setState(() {
firstSearch=false;
query=etSearch.text;
});
}
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Search ListView'),
backgroundColor: Colors.blue,
),
body: Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
child: new Column(
children:<Widget> [
_createSearchView(),
firstSearch ? _createListView():_perfomSearch()
],
),
),
);
}
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.blue)
),
textAlign: TextAlign.center,
),
);
}
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]}"),
),
);
},
));
}
Widget _perfomSearch(){
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();
}
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]}"),
),
);
},
));
}
}