app_bar_with_search_switch 1.2.1

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

AppBar with search switch

An AppBar that can switch into search field.

The AppBarWithSearchSwitch is 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:

• support Stateless widgets!,
• work with ValueNotifier inside, which can be used directly and it can easily work with any providers,
• full customization,
• it work in place(no Navigation shenanigans),
• don't need additional variables somewhere.

Quick overview:

Use appBarBuilder property to build default AppBar with:

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

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.keyboardType = TextInputType.text,
• this.toolbarWidth = double.infinity,
• // And notifiers:
• this.customIsActiveNotifier, // have default static value
• this.customTextEditingController, // have default static value

Example:

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  final searchText = ValueNotifier<String>('');
  final words = ("There is no justice in the laws of nature, no term for fairness in the equations of motion. "
      "The Universe is neither evil, nor good, it simply does not care. "
      "The stars don't care, or the Sun, or the sky. "
      "But they don't have to! WE care! There IS light in the world, and it is US! "
      "Why does any kind of cynicism appeal to people? Because it seems like a mark of maturity, of sophistication, like you’ve seen everything and know better. "
      "Or because putting something down feels like pushing yourself up. "
      "There is light in the world, and it is us! "
      "World domination is such an ugly phrase. I prefer to call it world optimisation. ").split(' ')
  ;


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 
      // *** The Widget AppBarWithSearchSwitch 
      // 
      appBar: AppBarWithSearchSwitch(
        onChanged: (text) {
          searchText.value = text;
        },
        // onSubmitted: (text) {
        //   searchText.value = text;
        // },
        appBarBuilder: (context) {
          final appBar = AppBarWithSearchSwitch.of(context)!;

          return AppBar(
            title: Text(title),
            actions: [
              AppBarSearchButton(),
              // or 
              // IconButton(onPressed: AppBarWithSearchSwitch.of(context)?startSearch, icon: Icon(Icons.search)),
            ],
          );
        },
      ),
      // 
      // > Just some random code to react to input from AppBarWithSearchSwitch.
      // 
      body: Center(
        child: AnimatedBuilder(
          animation: Listenable.merge([searchText,]),
          builder: (BuildContext context, _) {
            return Wrap(
              children: [
                for (var i = 0; i <= words.length; i++)
                  if (words[i].contains(searchText.value))
                    SizedBox(
                      height: 110,
                      width: 110,
                      child: Card(
                        child: Column(
                          children: [
                            Expanded(
                              child: Center(
                                child: Text(
                                  words[i],
                                  style: Theme.of(context).textTheme.headline4,
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
              ],
            );
          },
        ),
      ),

    );
  }
}

Screenshot

TODO:

Add speech to text support.

FAQ:

How to change search state of AppBarWithSearchSwitch from somewhere far away?

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