app_bar_with_search_switch 1.3.1

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

AppBar with search switch

Content

• Intro
• Quick overview
• Examples
• Screenshots
• TODO
• FAQ
• Known issues

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.

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

Features:

• support Stateless widgets!,
• work with ValueNotifier inside, which can be used directly or can easily work with any providers,
• full customization,
• it work in place(no Navigation shenanigans),
• don't need additional variables somewhere,
• Also, there are a few helpers(optional):
  • AppBarSearchButton,
  • AppBarOnEditListener,
  • AppBarOnSubmitListener,
  • AppBarWithSearchFinder,
  • AppBarSpeechButton - coming soon.

Quick overview

Use appBarBuilder parameter to build default AppBar with:

• a search button which will call startSearch
• or with standard search button AppBarSearchButton.

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

Use one of these callbacks to get text from TextField:

• onChanged,
• onSubmitted,
• or listen to textEditingController.

Also, there are callbacks for:

• onCleared,
• onClosed.

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:

• this.tooltipForClearButton = 'Clear',
• this.tooltipForCloseButton = 'Close search',
• this.closeSearchIcon = Icons.close,
• this.clearSearchIcon = Icons.backspace,
• this.fieldHintText = 'Search',
• this.keepAppBarColors = true,
• this.closeOnSubmit = true,
• this.clearOnSubmit = false,
• this.clearOnClose = false,
• this.showClearButton = true,
• this.closeOnClearTwice = true,
• this.submitOnClearTwice = true,
• this.keyboardType = TextInputType.text,
• this.toolbarWidth = double.infinity,
• this.searchInputDecoration,
• // And optional ValueNotifier s:
• this.customIsSearchModeNotifier,
• this.customHasText,
• this.customTextNotifier,
• this.customSubmitNotifier,
• // And optional TextEditingController:
• this.customTextEditingController,

Examples

Full example of Statefull 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).

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

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) { /* your code here */  } ),
    );
  }

Screenshots

TODO

• Add speech to text support,
• Add effective riverpod example,
• Add option for placement of SearchButton and MicrophoneButton outside of AppBar (optional GlobalKey?)
• Animation for Search app bar activation
• use iconTheme for icons?
• don't use shared default ValueNotifier and TextEditingController ?

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.

Known issues

• keepAppBarColors = true didn't change color of 'Text Selection Handles' (selection bubbles), this is because of upstream issue https://github.com/flutter/flutter/issues/74890 with textSelectionTheme: selectionHandleColor
• If for some reason you use more than one AppBarWithSearchSwitch on the same page (how? and why?) provide them with their own: customIsSearchModeNotifier, customTextNotifier, customTextEditingController, customHasText...