flappy_search_bar 1.6.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

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 #

  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),
            onCancelled: () {
              print("Cancelled triggered");
            header: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                  child: Text("Sort"),
                  onPressed: changeSort,
                  child: Text("Rm Sort"),
                  onPressed: removeSort,
                  child: Text("Filter"),
                  onPressed: filter,
                  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<ListCallback 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")
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)

[1.0.0] - 25/07/2019

  • Initial Release

[1.1.0] - 25/07/2019

  • Adding Header, Controller and Styling

This version enable you to ass a Header (Widget that will be placed between SearchBar and ListView. It also gives you the opportunity to have a Controller which is enable to sort or filter the list at any time. Finally, giving a SearchBarStyle, you will be able to change the SearchBar's styling.

[1.1.1] - 25/07/2019

  • Fixing bug on hot reload and on Controller state

[1.2.0] - 26/07/2019

  • Future are now cancelled if another request is made and prev was not completed yet
  • Increased a little bit the "cancellation" widget click's surface

[1.3.0] - 29/07/2019

  • SearchBarController is now enable to replay last search

[1.3.1] - 29/07/2019

  • Fix API replay's method's name

[1.4.0] - 04/10/2019

  • Add possibility to display items in a Grid
  • Possibility to customize the space taken by each individual tile

[1.4.1] - 04/10/2019

  • Add possibility to customize padding on List, Header and Search bar

[1.5.1] - 14/01/2020

  • Add callback on cancellation's button click

[1.5.2] - 14/01/2020

  • Fix README by adding cancellation's callback documentation

[1.6.2] - 15/01/2020

  • Add possibility to clear everything with the controller


sample #

A new Flutter application.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flappy_search_bar: ^1.6.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flappy_search_bar/flappy_search_bar.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
async ^2.2.0 2.4.0
flutter 0.0.0
flutter_staggered_grid_view ^0.3.0 0.3.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies