A SearchBar widget handling most of search cases.


To use this plugin, add flappy_search_bar 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 !


NameTypeUsageRequiredDefault Value
onSearchFuture<List> Function(String text)Callback giving you the text to look for and asking for a Futureyes-
onItemFoundWidget Function(T item, int index)Callback letting you build the widget corresponding to each itemyes-
suggestionsListPotential fist list of suggestions (when no request have been made)no[]
searchBarControllerSearchBarControllerEnable you to sort and filter your listnodefault controller
searchBarStyleSearchBarStyleSyle to customize SearchBarnodefault values on bottom tab
buildSuggestionsWidget 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)nonull
minimumCharsintMinimum number of chars to start queryingno3
onErrorFunction(Error error)Callback called when an error occur runnning Futurenonull
debounceDurationDurationDebounce's durationnoDuration(milliseconds: 500)
loaderWidgetWidget that appears when Future is runningnoCircularProgressIndicator()
emptyWidgetWidgetWidget that appears when Future is returning an empty listnoSizedBox.shrink()
iconWidgetWidget that appears on left of the SearchBarnoIcon(Icons.search)
hintTextStringHint Textno""
hintStyleTextStyleHint Text stylenoTextStyle(color: Color.fromRGBO(142, 142, 147, 1))
iconActiveColorColorColor of icon when activenoColors.black
textStyleTextStyleTextStyle of searched textnoTextStyle(color: Colors.black)
cancellationWidgetWidgetWidget shown on right of the SearchBarnoText("Cancel")
onCancelledVoidCallbackCallback triggered on cancellation's button clicknonull
crossAxisCountintNumber of tiles on cross axis (Grid)no2
shrinkWrapboolWether list should be shrinked or not (take minimum space)notrue
scrollDirectionAxisSet the scroll directionnoAxis.vertical
mainAxisSpacingintSet the spacing between each tiles on main axisno10
crossAxisSpacingintSet the spacing between each tiles on cross axisno10
indexedScaledTileBuilderIndexedScaledTileBuilderBuilder letting you decide how much space each tile should takeno(int index) => ScaledTile.count(1, index.isEven ? 2 : 1)
searchBarPaddingEdgeInsetsGeometrySet a padding on the search barnoEdgeInsets.symmetric(horizontal: 10)
headerPaddingEdgeInsetsGeometrySet a padding on the headernoEdgeInsets.symmetric(horizontal: 10)
listPaddingEdgeInsetsGeometrySet a padding on the listnoEdgeInsets.symmetric(horizontal: 10)

SearchBar default SearchBarStyle

NameTypedefault Value
backgroundColorColorColor.fromRGBO(142, 142, 147, .15)