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…

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here