flappy_search_bar

A SearchBar widget handling most of search cases.

Usage

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

Example

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: SearchBar<Post>(
            onSearch: (String text) => _getALlPosts(text),
            suggestions: [
              Post("Suggestion 1 titre", "Suggestion 1 body"),
              Post("Suggestion 2 titre", "Suggestion 2 body")
            ],
            searchBarController: _searchBarController,
            minimumChars: 3,
            searchBarStyle: SearchBarStyle(
              borderRadius: BorderRadius.all(Radius.circular(10.0))
            ),
            debounceDuration: Duration(milliseconds: 400),
            loader: Text("loading"),
            onError: (Error error) => Text("ERREUR"),
            emptyWidget: Text("Contenu vide !"),
            hintText: "Test",
            cancellationText: Text("Annuler"),
            buildSuggestion: (Post post, int index) {
              return ListTile(
                title: Text(post.title),
                subtitle: Text(post.body),
                enabled: false,
              );
            },
            onItemFound: (Post post, int index) {
              return ListTile(
                title: Text(post.title),
                subtitle: Text(post.body),
              );
            },
            header: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                RaisedButton(
                  child: Text("Sort"),
                  onPressed: changeSort,
                ),
                RaisedButton(
                  child: Text("Rm Sort"),
                  onPressed: removeSort,
                ),
                RaisedButton(
                  child: Text("Filter"),
                  onPressed: filter,
                ),
                RaisedButton(
                  child: Text("Rm Filter"),
                  onPressed: removeFilter,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

Try it

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

Warning

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 !

Parameters

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)
cancellationTextTextText shown on right of the SearchBarnoText("Cancel")
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)
paddingEdgeInsetsGeometryEdgeInsets.all(5.0)
borderRadiusBorderRadiusBorderRadius.all(Radius.circular(5.0))})

Libraries

scaled_tile
search_bar_style