arcticzeroo / flutter-search-bar

(mostly) Automatic search-enabled appBar for flutter

Archive Notice

This repository is archived. 3.0.0 is the last version that I will publish.

The SearchBar still works and it's pretty simple if you'd like to fork it. I just don't have the time to maintain it.

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)

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

inBar set to true (background inherited):

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
    );
  }
  
  @override
  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.

Using SearchBar

Essentially, this class returns two different app bars based on whether search is active.

The setState callback you pass the search bar can technically be any VoidCallback.

Features and bugs

Please file feature requests and bugs at the issue tracker.

We've recently added support for null-safety in 3.0.0 -- if you find any issues, please report them there!

flutter-search-bar's Issues

Support for RTL layout and languages

Maybe I didn't know how to implement this, but doesn't this plugin support RTL languages like Arabic and Hebrew etc?

Provide the example as a loadable project like the flutter gallery

I think it is just to much work consuming a small example like this. Better would be to open example sub-folder which would include the complete example as a flutter project. I can provide the project if needed

Show search bar right away.

I have a screen that is a dedicated search page, due to this I find it a little useless to need an extra click to show the search bar.

Instead, I'm wondering if its possible to automatically show the search bar instead.

Thanks

Listening for on close

How would I go about adding some kind of listener to perform some actions on close. I thought about using willpopscope but it doesn't do what I was looking for. and I am not sure where to declare the beginSearch method.

Does not support text input number

Hi! (first of all great work on flutter search bar)

ISSUE

KeyboardType only supports text though what about the cases when we have to deal with numbers? in my case I need to search by number

and I see in code
keyboardType: TextInputType.text,

should be

keyboardType: TextInputType.number,

though this would be have to be an optional settings

TECHNICAL APPROACH

@todo

NOTES

@todo

Full screen Search

An idea I had.

Search is often used to do a global restriction / filter on the whole app.

This is how I use it sometimes.

So if a user starts typing in the search bar the results come back under in a screen.
In my case I bring back boxes with amount of hit of each. This is called facet based search
From there a user can select certain boxes to restrict the search.

Has the plugin been abandoned?

I can't find the package in the pub.dart.org site any longer and seeing a bunch of Issues a few PRs and no movement I'm wondering if this package has been abandoned.

Unable to close the the search bar

I'm unable to close the searchbar with the back arrow that appears on it.
I've tried numerous things. Poping with navigator, etc..

I need to use inBar:true

The clear button doesn't trigger the onChanged callback

On version 2.0.7, on Android, pressing the clear button does not trigger the onChanged callback. I think it should trigger that callback.

No support for dart version > 2.0.0

environment:
sdk: '>=1.20.1 <=2.0.0'

I'm using Dart version 2.1.0-dev.1.0 and when I want to update the library to the latest version I get this error:
The current Dart SDK version is 2.1.0-dev.1.0.flutter-69fce633b7.

Because "your app" depends on flutter_search_bar >=1.0.3 which requires SDK version >=1.20.1 <=2.0.0, version solving failed.
pub get failed (1)

Clear button

The search bar should have a clear button on the right side.

This needs to meet the following requirements:

• The clear button should be OPTIONAL but opt-out (i.e. if no value is provided it appears)
• The icon for the clear button should be GREYED OUT when the text box is empty, and the same color as the back button otherwise (i.e. its color should dynamically change)
• Probably should avoid calling setState within the actual SearchBar class

Remove underline

How to remove the underline of the TextField of the search bar? Is it even possible to customize its style?

No search box on iOS.

Does not work on iOS. I do not see the search icon in the app bar.

Localizable string to hintText

I can't set the hintText based on Internationalization because I need to instantiate the _searchBar on the constructor and here I can't access to BuildContext.
Any idea?

Missing features

I would like to see these features:

• callback called on any text change when the search app is visible
• close button instead of the back button is more common to dismiss the appbar.
  For user it appears like that navigation never change.
• when the searchBar gets dismissed the last update should clear the search text (maybe that can be handled in the hosting code but it would be more elegant in the searchbar) This could be activated/deactivated with a bool in the constructor

Height?

How can i change the height of search bar?

SliverAppBar

Is work with SliverAppBar ?

Error when I run the example code

The context in the example is null
Scaffold.of(context) .showSnackBar(new SnackBar(content: new Text('You wrote $value!'))

when I run the example code. This is with the latest flutter and libs. I copied the example code to a newly generated flutter app.

More info here:
https://docs.flutter.io/flutter/material/Scaffold/of.html

This is fixing it:

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

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

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

class SearchBarDemoHome extends StatefulWidget {
  @override
  _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);
  }

  @override
  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!")),
    );
  }
}

resolved

Unable to show search bar

When I try to tap on the search button, the search bar doesn't open and just throws an error:

The method 'addLocalHistoryEntry' was called on null.
Receiver: null
Tried calling: addLocalHistoryEntry(Instance of 'LocalHistoryEntry')

What's the matter with it?

Theming support

Hi guys,

overall, the search bar is great and works perfectly. However, i'm starting to run into trouble when I try theming the bar, specifically the hint color or the button colors. The issue seems to be related to the below part:

Color textColor = inBar ? Colors.white70 : Colors.black54;

return new AppBar(
  leading: new BackButton(
    color: buttonColor
  ),
  backgroundColor: barColor,
  title: new Directionality(
    textDirection: Directionality.of(context),
    child: new TextField(
      key: new Key('SearchBarTextField'),
      keyboardType: TextInputType.text,
      style: new TextStyle(
          color: textColor,
          fontSize: 16.0
      ),
      decoration: new InputDecoration(
          hintText: hintText,
          hintStyle: new TextStyle(
              color: textColor,
              fontSize: 16.0
          ),
          border: null
      ),

TextColor is only depending on the search bar type (inBar), and has no relation to the Theme used...

Would it be possible to give some more flexibility for coloring the searchbar?

Would be highly appreciated!

Thanks,
Matthias

Hide and inactivate / show and activate search icon as wills

Hi Zeroo

Good job. Could you please add a bool flag serving for this purpose at runtime when re-building the Appbar?

Thanks in advance.
Ted

Error when trying example on Flutter 0.2.8 and Dart 2.0.0

The following assertion was thrown building Builder:
type '(() => void) => void' is not a subtype of type '(dynamic) => void'
Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.

Does not allow user input

Hi,

I'm testing your search bar and I see it does not allow user input. Everything is working fine except for the fact that I can't type anything in the textfield. I guess a fix is to update InputValue in setState() ?

Feature request: Migrate to null safety [flutter 2.0]

I really like your package and I hope you can update so that it will support flutter 2.0

Include an example screenshot in the documentation

Hi,
this looks promising. It would be great if you can include a screenshot in your Readme/documentation so people don't have to set it all up until they see what it looks like :)

Allow for customization of Search Bar

Currently, the searchBar can barely be customized. Items such as AppBar.brightness should be exposed.

Real time filtering

I need to filter the listview when user tapes in the search bar.
I have implemented the TextEditingController + listener

But, the listview is hidden when the searchbar is displayed.

How to display the list and filtered list when searchbar is active and users is typing text ?

Add support for OnChange events to support autocomplete features

SearchBar should be a StatefulWidget

There's no reason that SearchBar should not be a Widget, and furthermore passing setState and forcing the entire main Scaffold to rebuild is messy.

The SearchBar should be rewritten as a StatefulWidget. If we really want to avoid breaking, we could just make it a new class (SearchBarWidget).

It should take a Builder for building the AppBar. The getSearchAction method will be the only tricky bit.

Ideally we also support theming with Theme.of instead of hardcoded values, so that developers can wrap the widget in a Theme.

onClosed() is not fired when go "back" on navigation bar or by gesture

Hi!
Would you guys be able to look at this. Inside scaffold's body I have a FutureBuilder and I'm filtering data in onChanged() function.

  _ProductsScreenState() {
    searchBar = SearchBar(
        setState: setState,
        buildDefaultAppBar: buildAppBar,
        inBar: true,
        hintText: "Wyszukaj...",
        onSubmitted: print,
        onChanged: (value) async {
          if (!["", null, false, 0].contains(value)) {
            var products = await productsService.getProducts();
            var filteredProducts =
                products.where((element) => element.ean!.contains(value) || element.name.contains(value) || element.code.contains(value)).toList();
            setState(() {
              _products = Future.value(filteredProducts);
            });
          } else {
            _products = productsService.getProducts();
          }
        },
        onCleared: () {
          _products = productsService.getProducts();
        },
        onClosed: () {
          print("onClosed");
          _products = productsService.getProducts();
        });
  }

Function onClosed() is fired only when I tap on "back" icon provided by this plugin.

No support for SliverAppBar

SliverAppBar is currently not supported