How can i clear the search text editing controller and results?

[movieator]

Hello, i want to clear the search word (text editing controller) and clear the result list, when i tap on a result from that list (reset the searchBar). Is there any way to implement this?

Thanks!

[ThomasEcalle]

Hi @movieator

I have juste added it for you ! You now may call the method clear() on your SearchBarController.

This method will trigger the cancellation as if you clicked on the button. So you can do somthing like :

ListTile(
  title: Text(post.title),
  isThreeLine: true,
  subtitle: Text(post.body),
  onTap: () {
      _searchBarController.clear();
      Navigator.of(context).push(MaterialPageRoute(builder: (context) => Detail()));
   },
 ),

Do not hesitate if you need more information

[ThomasEcalle]

This new feature comes with the version 1.6.2 of the package :)

[movieator]

Thanks for the response! I have this issue now: when i add a controller, i m getting an error on the result list. This was happening on the previous version too. If i remove the controller, searching is working excellent! Am I doing something wrong?

My code is above:

class CustomSearchBar extends StatelessWidget {
  final MainModel model;
  final Function onComplete;
  CustomSearchBar(this.model, this.onComplete);

  final SearchBarController _controller = SearchBarController();

  Future<List<Item>> search(String search) async {
    List<Item> _items = [];
    for (Item item in model.items) {
      if (item.itemDescription.toUpperCase().contains(search.toUpperCase()) ||
          item.itemId.contains(search)) {
        _items.add(item);
      }
    }
    return _items;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SearchBar(
        onSearch: search,
        searchBarController: _controller,
        onItemFound: (Item item, int index) {
          return ListTile(
            title: Text(item.itemDescription),
            onTap: () {
              onComplete(item);
              _controller.clear();
            },
          );
        },
        minimumChars: 1,
        hintText: 'Αναζήτηση Είδους...',
        cancellationText: Text('Άκυρο'),
        debounceDuration: Duration(milliseconds: 400),
        textStyle: TextStyle(
            color: model.themeBrightness == 0 ? Colors.white : Colors.black),
        searchBarStyle: SearchBarStyle(
            backgroundColor: model.themeBrightness == 0
                ? Colors.grey[900]
                : Colors.grey[350],
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            borderRadius: BorderRadius.all(Radius.circular(10.0))),
        onCancelled: () => FocusScope.of(context).requestFocus(FocusNode()),
      ),
    );
  }
}

[ThomasEcalle]

You are welcome :)

I realize that I have not put it in the Readme but, in order to properly initialize a SearchBarController, you have to give it the generic type of your items like this :

final SearchBarController<Item> _controller = SearchBarController();

So, adding <Item> should fix your issue :)

Also, as you can see in the Readme.md, be careful when you use a SearchBarController in a StatelessWidget and prefer to store it in a StatefulWidget.

But, for your issue, putting just SearchBarController<Item> should fix it :)

[movieator]

It works great now! Yes i had it in a StatefulWidget before and then i recreated it in order to find a solution :P. I will turn it back to stateful again. Thank you!