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

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here