flappy_search_bar

A SearchBar widget handling most of the 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: 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>[
              RaisedButton(
                child: Text("sort"),
                onPressed: () {
                  _searchBarController.sortList((Post a, Post b) {
                    return a.body.compareTo(b.body);
                  });
                },
              ),
              RaisedButton(
                child: Text("Desort"),
                onPressed: () {
                  _searchBarController.removeSort();
                },
              ),
              RaisedButton(
                child: Text("Replay"),
                onPressed: () {
                  isReplay = !isReplay;
                  _searchBarController.replayLastSearch();
                },
              ),
            ],
          ),
          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 ! 🙂

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

Name	Type	Usage	Required	Default Value
onSearch	Future<List> Function(String text)	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))})