Code Monkey home page Code Monkey logo

flappy_search_bar's Introduction

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

flappy_search_bar's People

Contributors

thomasecalle avatar mohamedel-torky avatar kylerwsm avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.