A SearchBar widget handling most of search cases currently maintained by Abdirahman Baabale


To use this plugin, add flappy_search_bar_ns as a dependency in your pubspec.yaml file.


  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SearchBar<Post>(
          searchBarPadding: EdgeInsets.symmetric(horizontal: 10),
          headerPadding: EdgeInsets.symmetric(horizontal: 10),
          listPadding: EdgeInsets.symmetric(horizontal: 10),
          onSearch: _getALlPosts,
          searchBarController: _searchBarController,
          placeHolder: Text("placeholder"),
          cancellationWidget: Text("Cancel"),
          emptyWidget: Text("empty"),
          indexedScaledTileBuilder: (int index) => ScaledTile.count(1, index.isEven ? 2 : 1),
          header: Row(
            children: <Widget>[
                child: Text("sort"),
                onPressed: () {
                  _searchBarController.sortList((Post a, Post b) {
                    return a.body.compareTo(b.body);
                child: Text("Desort"),
                onPressed: () {
                child: Text("Replay"),
                onPressed: () {
                  isReplay = !isReplay;
          onCancelled: () {
            print("Cancelled triggered");
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          crossAxisCount: 2,
          onItemFound: (Post? post, int index) {
            return Container(
              color: Colors.lightBlue,
              child: ListTile(
                title: Text(post!.title),
                isThreeLine: true,
                subtitle: Text(post!.body),
                onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(builder: (context) => Detail()));

Try it

A sample app is available to let you try all the features ! :)


If you want to use a SearchBarController in order to do some sorts or filters, PLEASE put your instance of SearchBarController in a StateFullWidget.

If not, it will not work properly.

If you don't use an instance of SearchBarController, you can keep everything in a StateLessWidget !


Name Type Usage Required Default Value
onSearch Future<List Callback giving you the text to look for and asking for a Future yes -
onItemFound Widget Function(T item, int index) Callback letting you build the widget corresponding to each item yes -
suggestions List Potential fist list of suggestions (when no request have been made) no []
searchBarController SearchBarController Enable you to sort and filter your list no default controller
searchBarStyle SearchBarStyle Syle to customize SearchBar no default values on bottom tab
buildSuggestions Widget Function(T item, int index) Callback called to let you build Suggestion item (if not provided, the suggestion will have the same layout as the basic item) no null
minimumChars int Minimum number of chars to start querying no 3
onError Function(Error error) Callback called when an error occur runnning Future no null
debounceDuration Duration Debounce's duration no Duration(milliseconds: 500)
loader Widget Widget that appears when Future is running no CircularProgressIndicator()
emptyWidget Widget Widget that appears when Future is returning an empty list no SizedBox.shrink()
icon Widget Widget that appears on left of the SearchBar no Icon(Icons.search)
hintText String Hint Text no ""
hintStyle TextStyle Hint Text style no TextStyle(color: Color.fromRGBO(142, 142, 147, 1))
iconActiveColor Color Color of icon when active no Colors.black
textStyle TextStyle TextStyle of searched text no TextStyle(color: Colors.black)
cancellationWidget Widget Widget shown on right of the SearchBar no Text("Cancel")
onCancelled VoidCallback Callback triggered on cancellation's button click no null
crossAxisCount int Number of tiles on cross axis (Grid) no 2
shrinkWrap bool Wether list should be shrinked or not (take minimum space) no true
scrollDirection Axis Set the scroll direction no Axis.vertical
mainAxisSpacing int Set the spacing between each tiles on main axis no 10
crossAxisSpacing int Set the spacing between each tiles on cross axis no 10
indexedScaledTileBuilder IndexedScaledTileBuilder Builder letting you decide how much space each tile should take no (int index) => ScaledTile.count(1, index.isEven ? 2 : 1)
searchBarPadding EdgeInsetsGeometry Set a padding on the search bar no EdgeInsets.symmetric(horizontal: 10)
headerPadding EdgeInsetsGeometry Set a padding on the header no EdgeInsets.symmetric(horizontal: 10)
listPadding EdgeInsetsGeometry Set a padding on the list no EdgeInsets.symmetric(horizontal: 10)

SearchBar default SearchBarStyle

Name Type default Value
backgroundColor Color Color.fromRGBO(142, 142, 147, .15)
padding EdgeInsetsGeometry EdgeInsets.all(5.0)
borderRadius BorderRadius BorderRadius.all(Radius.circular(5.0))})