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: 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))}) |
70 Oct 28, 2022
3 Sep 13, 2022
2 May 31, 2022
1 Apr 20, 2022
2 Oct 28, 2021
11 Nov 3, 2022
5 Jul 27, 2021
1 Jun 18, 2020
10 Oct 25, 2022
38 Jan 4, 2023
136 Dec 10, 2022
104 Jan 3, 2023
18 Oct 17, 2022
3.7k Jan 1, 2023