Flutter search listview

by

When implementing a search functionality in a Flutter ListView, you can follow these steps:

Step 1: Create a List

Create a list to hold the original data and another list to hold the filtered data. You can use a variable to keep track of the search query.


List<String> originalList = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];
List<String> filteredList = [];
String searchQuery = '';

Step 2: Build the ListView

Build a ListView with ListTile widgets to display the data. Use the filteredList as the data source.


ListView.builder(
  itemCount: filteredList.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(filteredList[index]),
    );
  },
),

Step 3: Create a Search Field

Add a TextField widget for users to input their search query.


TextField(
  onChanged: (value) {
    setState(() {
      searchQuery = value;
      filterData();
    });
  },
)

Step 4: Filter the Data

Create a function called filterData() to filter the originalList based on the searchQuery. This function should update the filteredList.


void filterData() {
  filteredList =
      originalList.where((item) => item.toLowerCase().contains(searchQuery.toLowerCase())).toList();
}

Step 5: Update the UI

Call setState() whenever the search query changes to trigger a re-render of the ListView.


TextField(
  onChanged: (value) {
    setState(() {
      searchQuery = value;
      filterData();
    });
  },
),
ListView.builder(
  itemCount: filteredList.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(filteredList[index]),
    );
  },
),

With these steps, you will have a search functionality in your ListView. As the user types in the search field, the ListView will update to show the filtered results.

Here’s a complete example:


import 'package:flutter/material.dart';

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

class _SearchListViewState extends State {
  List<String> originalList = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry'];
  List<String> filteredList = [];
  String searchQuery = '';
  
  @override
  void initState() {
    super.initState();
    filterData();
  }

  void filterData() {
    filteredList =
        originalList.where((item) => item.toLowerCase().contains(searchQuery.toLowerCase())).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          onChanged: (value) {
            setState(() {
              searchQuery = value;
              filterData();
            });
          },
          decoration: InputDecoration(
            hintText: 'Search...',
          ),
        ),
      ),
      body: ListView.builder(
        itemCount: filteredList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(filteredList[index]),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SearchListView(),
  ));
}

Leave a comment