flappy_search_bar_fork 1.7.4

  • Readme
  • Changelog
  • Example
  • Installing
  • new69

flappy_search_bar_fork #

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 #

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

[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

[1.7.2] - 24/01/2020 #

  • Change cancellation widget in order to take a Widget instead of just a Text to make it more customizable

[1.7.3] - 21/06/2020 #

  • Fork flappy_search_bar: flappy_search_bar_search
  • Add cancellation widget width to make it more customizable
  • Add "Random" button in example app that change cancellation widget width randomly

[1.7.4] - 21/06/2020 #

  • Allow customize SearchBar Border
  • Allow customize SearchBar Height

example/lib/main.dart

import 'dart:math';

import 'package:flappy_search_bar_fork/flappy_search_bar.dart';
import 'package:flappy_search_bar_fork/scaled_tile.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Post {
  final String title;
  final String body;

  Post(this.title, this.body);
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final SearchBarController<Post> _searchBarController = SearchBarController();
  bool isReplay = false;
  Random random = Random();
  double cancellationWidgetWidth;

  Future<List<Post>> _getALlPosts(String text) async {
    await Future.delayed(Duration(seconds: text.length == 4 ? 10 : 1));
    if (isReplay) return [Post("Replaying !", "Replaying body")];
    if (text.length == 5) throw Error();
    if (text.length == 6) return [];
    List<Post> posts = [];

    var random = new Random();
    for (int i = 0; i < 10; i++) {
      posts.add(Post("$text $i", "body random number : ${random.nextInt(100)}"));
    }
    return posts;
  }

  @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"),
          cancellationWidgetWidth: cancellationWidgetWidth,
          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();
                },
              ),
              RaisedButton(
                child: Text("Random"),
                onPressed: () {
                  cancellationWidgetWidth = random.nextInt(250) + 50.0;
                  setState(() {});
                }
              )
            ],
          ),
          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()));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class Detail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.of(context).pop(),
            ),
            Text("Detail"),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flappy_search_bar_fork: ^1.7.4

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_fork/flappy_search_bar.dart';
import 'package:flappy_search_bar_fork/scaled_tile.dart';
import 'package:flappy_search_bar_fork/search_bar_style.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
38
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
69
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • flappy_search_bar_fork that is a package requiring null.

Health suggestions

Format lib/flappy_search_bar.dart.

Run flutter format to format lib/flappy_search_bar.dart.

Format lib/search_bar_style.dart.

Run flutter format to format lib/search_bar_style.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
async ^2.2.0 2.4.2
flutter 0.0.0
flutter_staggered_grid_view ^0.3.0 0.3.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test