Pada kali ini kita akan mempelajari atau membuat sebuah Search atau pencarian data pada flutter. Search ini merupakan sebuah pencarian data pada flutter. Berikut cara membuat sebuah search pada flutter.

• Buatlah sebuah project baru pada flutter
• Buatlah sebuah data dummy dengan beda file berikut ini:

List<String> items = [
  "Morgan Schultz",
  "Kassidy Zamora",
  "Dakota Lester",
  "Mauricio Estes",
  "Anton Fowler",
  "Angelique Cortez",
  "Michaela Flowers",
  "Zaiden Cohen",
  "Tomas Morrison",
  "Madeleine Carney",
  "Kaydence Trujillo",
  "Zion Dickson",
  "Laney Scott",
  "Kyleigh Jordan",
  "Teagan Roach",
  "Gilbert Rodgers",
  "Jaylan Ferrell",
  "Harley Fry",
  "Brittany Dickson",
  "Paulina Stanton",
  "Tyrell Delgado",
  "Brayden Conner",
  "Erin Stewart",
  "Justus Buck",
  "Jaycee Hancock",
  "Landon Hutchinson",
  "Maxim Schmitt",
  "Aaron Mccarthy",
  "Mikaela West",
  "Alexis Wolf",
  "Isabel Norman",
  "Delilah Bishop",
  "Brock Michael",
  "Aldo Brady",
  "Renee Harrell",
  "Conrad Reed",
  "Griffin Huerta",
  "Aditya Morgan",
  "Raegan Prince",
  "Rayna Curry",
];

• Buatlah sebuah tampilan untuk melakukan search arau pencarian data

import 'package:flutter/material.dart';

import 'data.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LatihanPencarian(),
    );
  }
}

class LatihanPencarian extends StatefulWidget {
  @override
  _LatihanPencarianState createState() => _LatihanPencarianState();
}

class _LatihanPencarianState extends State<LatihanPencarian> {

  //untuk mengontroll textfield saat ada perubahan
  TextEditingController _controllerSearch = TextEditingController();

  //data bertipe widget ini mulanya kita buat text.
  //tapi saat ada perubahan data ini akan berubah menjadi form dan sebalikanya menjadi text
  Widget? searchTextField = Text("List Users");

  //jika false maka tampilkan icon pencarian
  //jika true maka tampilkan icon panah dan close
  bool search = false;
  Color _bgColor = Colors.green;
  List list = [];

  @override
  void initState() {
    super.initState();
    //saat file ini dijalankan pertama kali
    //maka data list akan diisi dengan data dari data.dart
    list.addAll(items);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _bgColor,
        //title mulanya adalah text
        title: searchTextField,
        actions: <Widget>[
          //jika search bernilai false maka tampilkan icon search
          //jika search bernilai true maka tampilkan icon close
          (search == false)
              ? IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                setState(() {
                  searchTextField = appSearch(context);
                  _bgColor = Colors.white;
                  search = true;
                });
              })
              : IconButton(
              icon: Icon(
                Icons.close,
                color: Colors.black,
              ),
              onPressed: () {
                setState(() {
                  list.clear();
                  list.addAll(items);
                  _controllerSearch.clear();
                });
              })
        ],
      ),
      body: ListView.builder(
        itemCount: list.length,
        itemBuilder: (context, int index) {
          return ListTile(
            title: Text(
              list[index],
              style: TextStyle(fontSize: 18),
            ),
          );
        },
      ),
    );
  }

  //saat icon search dijalankan maka widget ini akan dijalankan
  //widget ini berupa form.
  Widget appSearch(BuildContext context) {
    return TextField(
      controller: _controllerSearch,
      style: TextStyle(color: Colors.black, fontSize: 18),
      decoration: InputDecoration(
          icon: IconButton(
              icon: Icon(
                Icons.arrow_back,
                color: Colors.black,
              ),
              onPressed: () {
                setState(() {
                  searchTextField = Text("List Users");
                  search = false;
                  _bgColor = Colors.green;
                  _controllerSearch.clear();
                  list.clear();
                  list.addAll(items);
                });
              }),
          hintText: "Search",
          hintStyle: TextStyle(color: Colors.grey)),
      // setiap ada perubahan, jalankan fungsi _searchName
      onChanged: (name) {
        _searchName(name);
      },
    );
  }

  //fungsi ini akan dijalankan setiap kalian typing/mengetik
  //fungsi ini akan mencari nama sesuai yang diketikkan
  _searchName(String name) {
    if (name.isNotEmpty) {
      setState(() {
        list.clear();
        //melakukan perulangan/looping
        items.forEach((item) {
          //jika list data ada yang mengandung susunan huruf yang dicari
          //maka masukan ke dalam data list
          if (item.toLowerCase().contains(name.toLowerCase())) {
            list.add(item);
          }
        });
      });
    } else {
      setState(() {
        list.clear();
        list.addAll(items);
      });
    }
  }
}

• Selesai dan kita bisa melakukan search data dengan mudah