flappy_search_bar 1.3.1

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<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")

SearchBar default SearchBarStyle #

NameTypedefault Value
backgroundColorColorColor.fromRGBO(142, 142, 147, .15)
paddingEdgeInsetsGeometryEdgeInsets.all(5.0)
borderRadiusBorderRadiusBorderRadius.all(Radius.circular(5.0))})

[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

example/README.md

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:


dependencies:
  flappy_search_bar: ^1.3.1

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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
42
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
89
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Aug 21, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.25 points)

38 out of 39 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/flappy_search_bar.dart. (-0.50 points)

Analysis of lib/flappy_search_bar.dart reported 1 hint:

line 96 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: SearchBar.searchBarController

Maintenance suggestions

The package description is too short. (-11 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

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