• Stars
    star
    172
  • Rank 221,201 (Top 5 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 5 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

SearchBar widget to handle most of search cases

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

More Repositories

1

FlappyTranslator

A tool which automatically generates Flutter localization resources from CSV and Excel files.
Dart
58
star
2

android-monero-miner

A minimal SDK that lets an integrator add a Monero Miner using the Javascript miner created by CoinHive. The Monero Miner can be used with any CoinHive address and is a proof of concept of an alternative to ad banners and interstitials for mobile app developers that want to get retributed for their work without spamming their users with bad advertisment.
Kotlin
25
star
3

Extra

Be extra productive on iOS with Extra.
Swift
22
star
4

StarsKit

StarsKit is a lightfull Swift library to simplify your app rating workflow.
Swift
20
star
5

SNSSocial

Make social networks management easier on iOS.
Objective-C
13
star
6

AppGuard

AppGuard is a guard for your iOS app, to check / force users to update your app or show what changed.
Swift
13
star
7

SwiftyBeaver-Destinations

Additionnal console destinations for SwiftyBeaver.
Swift
9
star
8

ios4me

iOS framework library
HTML
9
star
9

droid4me

Android application development framework
Java
9
star
10

directline-chatbot-android-sdk

A minimalistic SDK to connect directly a Microsoft Azure Web App Bot into an Android App.
Kotlin
7
star
11

medium_001

Margins, Insets, ScrollViews and Safe Area on iOS 11
Swift
7
star
12

backgrounddetector-android

A simple component you can integrate into your Android app in order to detect if the app goes to background or foreground This version of the library has no additional dependencies.
Java
3
star
13

SmartAppRating-android

Kotlin
2
star
14

flappy_infocenter

A Flutter plugin to handle events of the iOS Playing Info Center
Dart
2
star
15

ModernApp4Me

ModernApp4Me is a framework library dedicated to the development of Windows Phone and Windows Store applications.
HTML
2
star
16

ConnectivityListener-android

ConnectivityListener is an Android library to listen for Network changes
Kotlin
2
star
17

smartrecyclerview-android

Enhanced RecyclerView
Java
1
star
18

smartnsoft.github.io

The GitHub page for Smart&Soft.
HTML
1
star
19

droid4me.ext

droid4me.ext is an extension of the droid4me framework.
Java
1
star
20

SmartCocoapods

Repository Cocoapods de Smart&Soft
Ruby
1
star