Search View

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]}"),
          ),
        );
      },
    ));
  }
}

Leave a Comment