Question 211027 in Flutter Question posted in
The official Flutter documentation can be found here.

How to display data from a search in flutter?

I want to show a list of titles from my search but when I type any of the titles no listTile is displayed as well as the ProgressIndicator.The Provider.of<NotesProvider>(context, listen: false).usernotes is a list of titles. Any idea with respect to the question will be accepted.

class _SearchState extends State<Search> {
  @override
  Widget build(BuildContext context) {
    var searchprovider =
        Provider.of<NotesProvider>(context, listen: false).usernotes;

    var itemlist = [];
    var filteritems = [];
    bool isSearching = false;

    void descriptionlist({required String items}) async {
      setState(() {
        isSearching = true;
        searchprovider.forEach((element) {
          itemlist.add(element.description);
        });
        filteritems = itemlist
            .where((element) => element.contains(items.toLowerCase()))
            .toList();

            
        print(filteritems);
      });
      isSearching = false;
    }

    return Scaffold(
      appBar: AppBar(
        title: Container(
            width: 150,
            height: 50,
            child: TextField(
              onChanged: (value) {
                descriptionlist(items: value);
              },
            )),
      ),
      body: isSearching
          ? CircularProgressIndicator()
          : ListView.builder(
              itemCount: filteritems.length,
              itemBuilder: (context, index) {
                return ListTile(
                    title: Text(
                  filteritems[index],
                  style: TextStyle(fontSize: 50),
                ));
              }),
    );
  }
}

The print values of filteritems shows that the titles I wanted to display exist

Tags:

2

Answers


  1. 0

    You need to call setState after filtering the items so that the widget rebuilds with the updated filteritems. Additionally, you should wrap the CircularProgressIndicator widget inside a Visibility widget and set its visible property to isSearching. This way, the CircularProgressIndicator will only be visible while the search is in progress.

    class _SearchState extends State<Search> {
  var searchprovider =
    Provider.of<NotesProvider>(context, listen: false).usernotes;

  void descriptionlist({required String items}) async {
    setState(() {
      isSearching = true;
      itemlist.clear();

      searchprovider.forEach((element) {
        itemlist.add(element.description);
      });

      filteritems = itemlist
          .where((element) => element.contains(items.toLowerCase()))
          .toList();

      print(filteritems);
      isSearching = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    var searchprovider =
        Provider.of<NotesProvider>(context, listen: false).usernotes;

    var itemlist = [];
    var filteritems = [];
    bool isSearching = false;

    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: 150,
          height: 50,
          child: TextField(
            onChanged: (value) {
              descriptionlist(items: value);
            },
          ),
        ),
      ),
      body: Column(
        children: [
          Visibility(
            visible: isSearching,
            child: CircularProgressIndicator(),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: filteritems.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    filteritems[index],
                    style: TextStyle(fontSize: 50),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    In the updated code:

    A TextEditingController named _searchController is introduced to handle the search text field’s text changes and provide access to the entered query.

    The itemlist is populated in the initState() method, where it extracts the description property from each element of the usernotes list using map() and toList().

    The searchItems() function is modified to receive the query string and perform the filtering operation. The search is case-insensitive, and the filtered results are stored in filteritems.

    The TextField inside the app bar now has a hint text provided using the decoration property of InputDecoration.

    A CircularProgressIndicator is displayed when isSearching is true to indicate that the search operation is in progress.

    The ListView.builder is updated to use a smaller font size (fontSize: 20) for the filtered items.

    class _SearchState extends State<Search> {
  TextEditingController _searchController = TextEditingController();
  List<String> itemlist = [];
  List<String> filteritems = [];
  bool isSearching = false;

  @override
  void initState() {
    super.initState();
    itemlist = Provider.of<NotesProvider>(context, listen: false).usernotes
        .map((element) => element.description)
        .toList();
  }

  void searchItems(String query) {
    setState(() {
      isSearching = true;
      filteritems = itemlist
          .where((element) => element.toLowerCase().contains(query.toLowerCase()))
          .toList();
      isSearching = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: 150,
          height: 50,
          child: TextField(
            controller: _searchController,
            onChanged: (value) {
              searchItems(value);
            },
            decoration: InputDecoration(
              hintText: 'Search...',
            ),
          ),
        ),
      ),
      body: isSearching
          ? Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: filteritems.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    filteritems[index],
                    style: TextStyle(fontSize: 20),
                  ),
                );
              },
            ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search