flutter_search_bar 2.0.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 43

flutter_search_bar #

A simple and mostly automatic material search bar for flutter (dart).

Note: use flutter_search_bar and not search_bar -- I own both packages but I'm just a tad bit locked out of search_bar, so it won't be updated.

Screenshots #

Normal state (search is not active yet, only title and actions are set, with the only action being a search button)

Normal State

inBar set to false (background white, back button inherited):

inBar false

inBar set to true (background inherited):

inBar true

Usage #

A simple usage example:

class _MyHomePageState extends State<MyHomePage> {
  SearchBar searchBar;
  AppBar buildAppBar(BuildContext context) {
    return new AppBar(
      title: new Text('My Home Page'),
      actions: [searchBar.getSearchAction(context)]
  _MyHomePageState() {
    searchBar = new SearchBar(
      inBar: false,
      setState: setState,
      onSubmitted: print,
      buildDefaultAppBar: buildAppBar
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: searchBar.build(context)

This will create an AppBar with a search button as its only action, and on press the AppBar will turn white and have a TextField inside, allowing user input. Once the user has input something and pressed the "enter" button on their keyboard, it will close and the value will be printed to the debugger.

Essentially, this class returns two different app bars based on whether search is active. Colors from the most recently built "default" app bar are used to color the search bar.

I may refer to the two different app bars as default and search. Default is, as may be inferred, the default app bar. It shows up when you open your app, and is the "default state". Once its search button has been pressed, the search app bar appears, where the user can put in input and submit a field.

TypeDefs #


typedef AppBar AppBarCallback(BuildContext context);

This should take BuildContext and return an Appbar.


typedef void TextFieldSubmitCallback(String value);

This should take the value of the input field and return nothing.


typedef void SetStateCallback(fn);

This should take a function and return nothing. Generally, this should just be setState. More below.

Constructor #

bool inBar - Whether the search should take place "in the existing search bar", meaning whether it has the same background as the AppBar or a flipped (white) one (which also has a colored back button if necessary). Defaults to true.

bool colorBackButton - Whether the back button in the search bar should be colored, if false it will be Colors.grey.shade400. Defaults to true.

bool closeOnSubmit - Whether the search bar should close once it has been submitted. You should probably keep this on, and it defaults to true anyways.

String hintText - The hint text for the TextField that appears when the search button is pressed. Defaults to just 'Search'.

AppBarCallback buildDefaultAppBar - The function to be called each time the default app bar is built. The colors from the most recent AppBar build will be used for the next search app bar.

TextFieldSubmitCallback onSubmitted - A void callback called when the search bar is submitted.

SetStateCallback setState - This is called every time the State needs to be updated (i.e. when the AppBar changes). You can literally just pass setState to this, unless for some reason you want to do extra stuff each time the AppBar changes.

Properties #

In addition to all of the above properties set in the constructor:

bool _isSearching - Whether search is active.

AppBar _defaultAppBar - The last built default app bar.

Methods #


IconButton getSearchAction(BuildContext context) This takes context as an argument, and returns an IconButton suitable for an Action in an AppBar. If you want your SearchBar to actually work, put this inside your buildDefaultAppBarpub method.


AppBar build(BuildContext context)

This takes context as an argument, and returns an AppBar based on whether search is active.

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Changelog #

2.0.7 #

  • Added SearchBar.onClosed handler for closing of the search bar (it doesn't fire when submitted, only cancelled)

2.0.6 #

  • Updated to Dart 2

2.0.5 #

  • SearchBar's app bar callback is now less strict, and allows any widget to be returned.
  • Many variables are now final
  • isSearching is a new property on SearchBar, and it's a ValueNotifier. Don't change the value on it yourself or things might be screwed up.

2.0.4 #

  • Added SearchBar.onChanged event which can be set in search bar initialization

2.0.3 #

  • SearchBar.hintText is no longer final or required so you can now assign it values after initialization (e.g. for i18n)

2.0.2 #

  • Add SearchBar.isSearching property to tell whether search is currently active

2.0.1 #

  • Remove a bunch of extra debug. Whoops!
  • Adds support for RTL automagically using Directionality

2.0.0 #

  • Add a clear button option to the search bar, which will obviously clear all text when pressed. It's greyed out when there is no text in the bar.
  • Replace the named 'hideDivider' property with 'border' to support the newest version of flutter

1.0.4 #

  • Add support for controller in the TextField

1.0.3 #

  • Fix an issue where calling Navigator.pop methods inside onSubmitted would cause a NPE and throw a really gnarly error that doesn't even print to console.

1.0.2 #

  • Fix an issue where a null backgroundColor in appBar caused a white back button. Also, change to flutter_search_bar because I'm a genius and locked myself out of search_bar until I buy gapps for spencer@frozor.io.

1.0.1 #

  • Compile documentation, whoops.

1.0.0 #

  • Initial version


import 'package:flutter/material.dart';
import 'package:flutter_search_bar/flutter_search_bar.dart';

void main() {
  runApp(new SearchBarDemoApp());

class SearchBarDemoApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Search Bar Demo',
        theme: new ThemeData(primarySwatch: Colors.blue),
        home: new SearchBarDemoHome());

class SearchBarDemoHome extends StatefulWidget {
  _SearchBarDemoHomeState createState() => new _SearchBarDemoHomeState();

class _SearchBarDemoHomeState extends State<SearchBarDemoHome> {
  SearchBar searchBar;
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  AppBar buildAppBar(BuildContext context) {
    return new AppBar(
        title: new Text('Search Bar Demo'),
        actions: [searchBar.getSearchAction(context)]);

  void onSubmitted(String value) {
    setState(() => _scaffoldKey.currentState
        .showSnackBar(new SnackBar(content: new Text('You wrote $value!'))));

  _SearchBarDemoHomeState() {
    searchBar = new SearchBar(
        inBar: false,
        buildDefaultAppBar: buildAppBar,
        setState: setState,
        onSubmitted: onSubmitted,
        onClosed: () {

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: searchBar.build(context),
      key: _scaffoldKey,
      body: new Center(
          child: new Text("Don't look at me! Press the search button!")),

Use this package as a library

1. Depend on it

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

  flutter_search_bar: ^2.0.7

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter pub get

Alternatively, your editor might support pub get or 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:flutter_search_bar/flutter_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.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.1 <=3.0.0