Add onSubmitted and onChanged for SearchAnchor and SearchAnchor.bar

[QuncCccccc]

Fixes #130687 and #132915

This PR is to add two properties: viewOnChanged and viewOnSubmitted to SearchAnchor and SearchAnchor.bar so we can control the search bar on the search view.

Pre-launch Checklist

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• I read the [Tree Hygiene] wiki page, which explains my responsibilities.
• I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
• I signed the [CLA].
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is [test-exempt].
• All existing and new tests are passing.

[HansMuller]

LGTM

[sjohnsonaz]

I just ran into this issue, and this fix is exactly what I need! Do you know when this will be released?

[goerlitz]

I came here through #132915 and #137210 because the example given in https://api.flutter.dev/flutter/material/SearchBar-class.html is not mentioning viewOnChange and viewOnSubmit callbacks at all.
Thus the SearchBar documentation still leaves you with a broken example and no clue how to fix it.

I think the documentation in SearchBar and in SearchAnchor should make clear that

• controller.openView() creates a new suggestion view that does not trigger the onChanged and onSubmit callbacks of SearchBar - these callbacks only work if controller.openView() is not used.
• it is not possible to register these callbacks on the SearchController
• instead, to react on the suggestion view events one should use viewOnChanged and viewOnSubmit in the SearchAnchor (doh!) - which is - again - not mentioned in SearchAnchor documentation.

[rahulmukh1ya]

Is there a way to close the suggestion view after entering text and clicking submit (Not the suggested text)?. Since controller.closeView() doesn't trigger on onSumitted and i can't access it in viewOnSubmitted. I tried Navigator.of(context).pop(); inside viewOnSubmitted, it works but it has errors.

[goerlitz]

I have a working solution that I paste below

But to be honest, I don't really like the way SearchAnchor and SearchBar are designed, because it is confusing and error-prone. Specifically:

• SearchAnchor.viewOnChanged()/viewOnSubmitted() need a reference to the controller which only builder and suggestionBuilder have unless you create one separately like in the code below.
• SearchAnchor.viewOnChanged()/viewOnSubmitted() reference an implicit view which only gets created in the builder when you use SearchBar with onTap: controller.openView (or something similar) (doh!)

I think it would be much clearer if one had access to the search view itself and its onChanged and onSubmitted callbacks instead of handling this through the SearchAnchor.

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final _searchController = SearchController();   // <-- create a dedicated search controller

  void _onTyped(String text) {
    // open search view when typing in search bar
    if (!_searchController.isOpen) {
      _searchController.openView();
    }
    // get typeahead recommendations
  }

  void _onSubmitted(String text) {
    // close search view after pressing enter or selecting a recommendation.
    // (in search bar as well as in search view)
    if (_searchController.isOpen) {
      _searchController.closeView(text);
    }
    // execute search
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
            padding: const EdgeInsets.all(4.0),
            child: SearchAnchor(
              searchController: _searchController,  // <-- use dedicated search controller
              viewOnChanged: _onTyped, // <- user is typing in search view
              viewOnSubmitted: _onSubmitted, // user pressed enter in search view
              builder: (context, controller) {
                return SearchBar(
                  controller: controller, // <-- this is the same controller but passed by the builder
                  onTap: controller.openView,
                  onChanged: _onTyped, // <-- user is typing in search bar (not search view)
                  onSubmitted: _onSubmitted, // <-- user pressed enter in search bar (not search view)
                  padding: const MaterialStatePropertyAll<EdgeInsets>(
                      EdgeInsets.symmetric(horizontal: 16.0)),
                  leading: const Icon(Icons.search),
                );
              },
              suggestionsBuilder: (context, controller) {
                return [
                  ListTile(
                    title: const Text("Item1"),
                    onTap: () => _onSubmitted("item1"), // <-- user selected a suggestion
                  )
                ];
              },
            ),
          ),