List View Filter Search in Flutter

Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “ListView Filter search in Flutter”.

List View berbentuk sebuah list yang tidak memiliki batasan dalam menaruh widget di dalamnya. Jika kita membuat list yang panjang dan melebihi layar pada handphone, widget List View secara otomatis akan melakukan scrolling pada layar handphone sesuai banyak list yang ditampilkan oleh data.

yuk mari kita mulai saja…

  1. Buat class dengan nama search_listview.dart. Tambahkan AppBar didalamnya kemudian beri title dengan nama “Seach List View”.
import 'package:flutter/material.dart';

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

class _SearchListViewState extends State<SearchListView> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text("Search List View"),
      ),
      body: Column(
        children: [
          
        ],
      ),
    );
  }
  }
}

2. Kemudian tambahkan list data yang ingin kita tampilkan nantinya. Tambahkan diatas override.

List<String> dataList = [
    "Macbook",
    "Acer",
    "Samsung",
    "Boomerang",
    "Butterfly",
    "Axio",
    "Iphone",
    "Aqua",
    "Laptop",
    "SmartPhone",
    "Sendok",
    "Program"
  ];

3. Kemudian tambahkan widget baru dengan nama listDataView() seperti berikut.

Widget listDataView() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataList[index]}'),
              );
            }));
  }

4. Panggil List Data di dalam body seperti berikut.

import 'package:flutter/material.dart';

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

class _SearchListViewState extends State<SearchListView> {
  List<String> dataList = [
    "Macbook",
    "Acer",
    "Samsung",
    "Boomerang",
    "Butterfly",
    "Axio",
    "Iphone",
    "Aqua",
    "Laptop",
    "SmartPhone",
    "Sendok",
    "Program"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text("Search List View"),
      ),
      body: Column(
        children: [
           listDataView(),
        ],
      ),
    );
  }

 Widget listDataView() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataList[index]}'),
              );
            }));
  }
}

Hasil running List data View

List Data View

5. Selanjutnya kita membuat kolom search nya dahulu. buat widget baru searchView()

Widget searchView() {
    return Container(
      margin: EdgeInsets.only(top: 10, right: 10, left: 10),
      child: TextFormField(
        controller: cari,
        decoration: InputDecoration(
            hintText: "Search",
            // prefix: Icon(Icons.search),
            hintStyle: TextStyle(
              color: Colors.green,
            ),
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
      ),
    );
  }

6. Kemudian panggil search view didalam body.

import 'package:flutter/material.dart';

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

class _SearchListViewState extends State<SearchListView> {

  List<String> dataList = [
    "Macbook",
    "Acer",
    "Samsung",
    "Boomerang",
    "Butterfly",
    "Axio",
    "Iphone",
    "Aqua",
    "Laptop",
    "SmartPhone",
    "Sendok",
    "Program"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text("Search List View"),
      ),
      body: Column(
        children: [
          searchView(),
          listDataView(),
        ],
      ),
    );
  }

  Widget searchView() {
    return Container(
      margin: EdgeInsets.only(top: 10, right: 10, left: 10),
      child: TextFormField(
        controller: cari,
        decoration: InputDecoration(
            hintText: "Search",
            // prefix: Icon(Icons.search),
            hintStyle: TextStyle(
              color: Colors.green,
            ),
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
      ),
    );
  }

  Widget listDataView() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataList[index]}'),
              );
            }));
  }
}

Hasil running List data View with search

List Data View with Search

7. Selanjutnya kita akan melakukan filter data. Filter disini maksudnya ketika kita melakukan searching pada kolom search, kata yang kita inginkan akan muncul.

Pertama kita tambahkan code sebagai berikut:


  bool isCari = true;
  String query = "";
  TextEditingController cari = TextEditingController();
  List<String> dataFilter = [];


  _SearchListViewState() {
    cari.addListener(() {
      if (cari.text.isEmpty) {
        setState(() {
          isCari = true;
          query = "";
        });
      } else {
        setState(() {
          isCari = false;
          query = cari.text;
        });
      }
    });
  }

 

8. Kemudian tambahkan widget dengan nama perfomfilter()

 Widget performFilter() {
    //untuk search
    dataFilter = [];
    for (int i = 0; i < dataList.length; i++) {
      var item = dataList[i];
      if (item.toLowerCase().contains(query.toLowerCase())) {
        dataFilter.add(item);
      }
    }
    return showDataFilter();
  }

9. Buat kembali widget baru dengan nama showDataFilter(),

 Widget showDataFilter() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataFilter.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataFilter[index]}'),
              );
            }));
  }

10. kemudian panggil didalam body.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text("Search List View"),
      ),
      body: Column(
        children: [
          searchView(),
          isCari ? listDataView() : performFilter(), // tambah search di is cari
        ],
      ),
    );
  }

11. Hasil running sebagai berikut.

Berikut codingan lengkapnya ya teman-teman :

import 'package:flutter/material.dart';

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

class _SearchListViewState extends State<SearchListView> {
//untuk searching
  bool isCari = true;
  String query = "";
  TextEditingController cari = TextEditingController();
  List<String> dataFilter = [];

  List<String> dataList = [
    "Macbook",
    "Acer",
    "Samsung",
    "Boomerang",
    "Butterfly",
    "Axio",
    "Iphone",
    "Aqua",
    "Laptop",
    "SmartPhone",
    "Sendok",
    "Program"
  ];

  //search
  _SearchListViewState() {
    cari.addListener(() {
      if (cari.text.isEmpty) {
        setState(() {
          isCari = true;
          query = "";
        });
      } else {
        setState(() {
          isCari = false;
          query = cari.text;
        });
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text("Search List View"),
      ),
      body: Column(
        children: [
          searchView(),
          isCari ? listDataView() : performFilter(), // tambah search di is cari
        ],
      ),
    );
  }

  Widget searchView() {
    return Container(
      margin: EdgeInsets.only(top: 10, right: 10, left: 10),
      child: TextFormField(
        controller: cari,
        decoration: InputDecoration(
            hintText: "Search",
            // prefix: Icon(Icons.search),
            hintStyle: TextStyle(
              color: Colors.green,
            ),
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(10))),
      ),
    );
  }

  Widget listDataView() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataList[index]}'),
              );
            }));
  }

// search
  Widget performFilter() {
    //untuk search
    dataFilter = [];
    for (int i = 0; i < dataList.length; i++) {
      var item = dataList[i];
      if (item.toLowerCase().contains(query.toLowerCase())) {
        dataFilter.add(item);
      }
    }
    return showDataFilter();
  }

// search
  Widget showDataFilter() {
    return Flexible(
        child: ListView.builder(
            itemCount: dataFilter.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${dataFilter[index]}'),
              );
            }));
  }
}

Tidak sulit bukan? Selamat mencoba sobat Flutter…

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