app_bar_with_search_switch 2.0.0-dev.20 copy "app_bar_with_search_switch: ^2.0.0-dev.20" to clipboard
app_bar_with_search_switch: ^2.0.0-dev.20 copied to clipboard

An extension for AppBar which can switch it into search field.

AppBar with search switch #

Content #

Intro #

An AppBar that can switch into search field.

The AppBarWithSearchSwitch is a replacement class for AppBar, essentially, it returns two different app bars based on whether search is active.

Note: version 1.5+ is lightweight version of this package, version 2.0+ uses SpeechToText package for speech recognition.

This is complete rewrite of flutter_search_bar with support of these features:

Features #

Quick overview #

Use appBarBuilder parameter to build default AppBar with:

The appBarBuilder is the only required parameter, all other parameters are optional!

Use one of these callbacks to get text from TextField:

Also, there are callbacks for:

This widget support almost all properties of AppBar, but:

  • leading and title properties are now expect - Widget Function(context)?:

    • this is made in order to access AppBarWithSearchSwitch.of(context) methods in them,
    • don't change them unless it necessary and use templates if you need to change these properties.
  • preferredSize here is a method, you should set it via toolbarWidth and toolbarHeight.

Here is a list of all other new properties(without mentioned above) with their default values:

For using SpeechToText it is required to setup build configurations of your project:

Examples #

Online example here: https://alexqwesa.github.io/app_bar_with_search_switch/.

Full example of Stateful widget is here: https://pub.dev/packages/app_bar_with_search_switch/example.

Full example of Stateless widget is here: (github).

Full example of Stateless widget with 10000 elements searched in place and with search button outside of app bar is here: (github).

Full example of Stateless widget there android back button will close search is here: (github).

And the fragment of example code is here:

  //...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //
      // *** The Widget AppBarWithSearchSwitch
      //
      appBar: AppBarWithSearchSwitch(
        onChanged: (text) {
          // update you provider here
          // searchText.value = text;
        }, // onSubmitted: (text) => searchText.value = text,
        appBarBuilder: (context) {
          return AppBar(
            title: Text('Example '),
            actions: [
              AppBarSearchButton(),
              // or
              // IconButton(onPressed: AppBarWithSearchSwitch.of(context)?startSearch, icon: Icon(Icons.search)),
            ],
          );
        },
      ),
      // search in body by any way you want, example:
      body: AppBarOnEditListener(builder: (context) { return /* your code here */ ;} ),
    );
  }

Screenshots #

TODO #

  • Add speech to text support - done in version 2.0+,
  • Add riverpod example,
  • Add option for placement of SearchButton and MicrophoneButton outside of AppBar (optional GlobalKey?) - see FAQ
  • Animation for Search app bar activation - done in versions 1.5+
  • use iconTheme for icons?
  • don't use shared default ValueNotifier and TextEditingController ?
  • support CupertinoPageScaffold

FAQ #

How to activate search field (isSearchMode=true) of AppBarWithSearchSwitch from somewhere far away?

  • If it is inside the same Scaffold or its children, then:

    1. use AppBarWithSearchFinder,
    2. call AppBarWithSearchFinder.of(context)?.triggerSearch() inside.
  • If it is outside of Scaffold, use customIsSearchModeNotifier,

    1. Initialise variable of type ValueNotifier somewhere up in the widget tree,
    2. Set customIsSearchModeNotifier property of AppBarWithSearchSwitch with this variable,
    3. Set value of this ValueNotifier to true to show Search AppBar,
    4. (Note: currently, if you stop search via this variable(by setting it false), clearOnClose will not work, and callBack onClose will not be called), so use GlobalKey if you need them.

How to make android back button close search? (instead of going to previous screen or exit app)

  1. Initialise variable searchText and isSearchMode of type ValueNotifier somewhere up in the widget tree,
  2. Assign these variables to customIsSearchModeNotifier, customTextNotifier,
  3. Wrap WillPopScope widget over Scaffold, and define parameter onWillPop as in example below:
... // inside a widget
  final isSearchMode = ValueNotifier<bool>(false);
  final searchText = ValueNotifier<String>(''); 

  @override
  Widget build(BuildContext context) {

    return WillPopScope(
      onWillPop: () async { // android back button handler
        if (searchText.value != '') {
          isSearchMode.value = false;
          searchText.value = ''; 
          return false;
        }
        return true;
      },
      child: Scaffold(
        //
        // *** The Widget AppBarWithSearchSwitch
        //
        appBar: AppBarWithSearchSwitch(
          customIsSearchModeNotifier: isSearchMode,
          customTextNotifier: searchText,
          appBarBuilder: (context) {
            return AppBar(
... // you code here

How to add autocompletion to search field?

... // inside a widget
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBarWithSearchSwitch(
          title:  (context) {
                return Autocomplete<String>(
                  optionsBuilder: (TextEditingValue textEditingValue) {
                    // your code here
                  },
                ); 
          }
          appBarBuilder: (context) {
            return AppBar(
... // you code here

Speech to text didn't work in emulator, how to fix?

  • check: are you added permissions to AndroidManifest.xml,
  • check: are you granted permission to you app in Android(see about app page in android settings),
  • check: are emulator settings allow access to microphone,
  • check: is Google installed,
  • check: is Google work,
  • check: is you microphone work on host side,
  • see https://pub.dev/packages/speech_to_text#troubleshooting for troubleshooting...

Known issues #

49
likes
150
pub points
88%
popularity

Publisher

unverified uploader

An extension for AppBar which can switch it into search field.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, speech_to_text

More

Packages that depend on app_bar_with_search_switch