fix: Search anchor box location when used on nested navigator #127198

VictorOhashi · 2023-05-19T15:00:17Z

This PR is to fix the position of SearchAnchor when used with nested navigator. This solution is based on what DropdownButton internally do, looking to the closest Navigator to proper calculate the where to render SearchViewRoute.

Fixes: #126435
Fixes: #126542

Test case

void main() => runApp(const NestedSearchBarApp());

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

  @override
  State<NestedSearchBarApp> createState() => _NestedSearchBarAppState();
}

class _NestedSearchBarAppState extends State<NestedSearchBarApp> {
  final SearchController controller = SearchController();

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = ThemeData(useMaterial3: true);

    return MaterialApp(
      theme: themeData,
      builder: (BuildContext context, Widget? child) {
        return Scaffold(
          body: Row(
            children: <Widget>[
              NavigationRail(
                selectedIndex: 1,
                destinations: const <NavigationRailDestination>[
                  NavigationRailDestination(
                    icon: Icon(Icons.favorite_border),
                    selectedIcon: Icon(Icons.favorite),
                    label: Text('First'),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.bookmark_border),
                    selectedIcon: Icon(Icons.book),
                    label: Text('Second'),
                  ),
                ],
              ),
              const VerticalDivider(thickness: 1, width: 1),
              Expanded(child: child!)
            ],
          ),
        );
      },
      home: Scaffold(
        appBar: AppBar(title: const Text('Search Anchor Sample')),
        body: Column(
          children: <Widget>[
            SearchAnchor(
                searchController: controller,
                builder: (BuildContext context, SearchController controller) {
                  return IconButton(
                    icon: const Icon(Icons.search),
                    onPressed: () {
                      controller.openView();
                    },
                  );
                },
                suggestionsBuilder:
                    (BuildContext context, SearchController controller) {
                  return List<ListTile>.generate(5, (int index) {
                    final String item = 'item $index';
                    return ListTile(
                      title: Text(item),
                      onTap: () {
                        setState(() {
                          controller.closeView(item);
                        });
                      },
                    );
                  });
                }),
            Center(
              child: controller.text.isEmpty
                  ? const Text('No item selected')
                  : Text('Selected item: ${controller.value.text}'),
            ),
          ],
        ),
      ),
    );
  }
}

Before fix:

After fix:

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.

flutter#126435

google-cla · 2023-05-19T15:00:23Z

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

QuncCccccc

Thanks so much for the fix!!

Could you also add a unit test for the fix in search_anchor_test.dart?

VictorOhashi · 2023-05-22T13:34:18Z

Thanks so much for the fix!!

Could you also add a unit test for the fix in search_anchor_test.dart?

Done

QuncCccccc

LGTM:)

QuncCccccc · 2023-05-22T18:57:20Z

packages/flutter/lib/src/material/search_anchor.dart

@@ -357,17 +357,6 @@ class _SearchAnchorState extends State<SearchAnchor> {
    Navigator.of(context).pop();
  }

-  Rect? getRect(GlobalKey key) {


Thanks for removing this unused method! Didn't notice this before.

HansMuller

LGTM

…flutter/flutter#127198)

flutter/flutter@3437189...f86c529 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from 431ed51c6415 to 168b0bf3f70d (1 revision) (flutter/flutter#127382) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from cc79ae858591 to 431ed51c6415 (1 revision) (flutter/flutter#127381) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from 311438399a45 to cc79ae858591 (1 revision) (flutter/flutter#127377) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from c284cd10e7ab to 311438399a45 (1 revision) (flutter/flutter#127376) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from 8d6602b030be to c284cd10e7ab (2 revisions) (flutter/flutter#127372) 2023-05-23 tessertaha@gmail.com Add M3 date picker tests and fix divider (flutter/flutter#127197) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from 2586cbeeae37 to 8d6602b030be (2 revisions) (flutter/flutter#127370) 2023-05-23 engine-flutter-autoroll@skia.org Manual roll Flutter Engine from a342a9186e69 to 2586cbeeae37 (14 revisions) (flutter/flutter#127369) 2023-05-23 43054281+camsim99@users.noreply.github.com [Android] Adds `namespace` to module build file templates (flutter/flutter#126963) 2023-05-23 zanderso@users.noreply.github.com Revert Engine to a342a9186e69 (flutter/flutter#127368) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from 2a325eed77d0 to 41e8d52a006a (2 revisions) (flutter/flutter#127365) 2023-05-23 engine-flutter-autoroll@skia.org Roll Flutter Engine from a342a9186e69 to 2a325eed77d0 (7 revisions) (flutter/flutter#127364) 2023-05-23 parlough@gmail.com Remove null-safety argument from DartPad doc samples (flutter/flutter#127345) 2023-05-22 daniel.iglesia@gmail.com Support keeping a bottom sheet with a DraggableScrollableSheet from closing on drag/fling to min extent (flutter/flutter#127339) 2023-05-22 jacksongardner@google.com Fix wasm-opt location when using local_web_sdk (flutter/flutter#127355) 2023-05-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from 1ed9fc0caf55 to a342a9186e69 (3 revisions) (flutter/flutter#127352) 2023-05-22 louisehsu@google.com Show warning when attempting to flutter run on an ios device with developer mode turned off (flutter/flutter#125710) 2023-05-22 ian@hixie.ch Suggest that people move to "beta" when they upgrade on "master" (flutter/flutter#127146) 2023-05-22 andrewrkolos@gmail.com add test for setting JAVA_HOME and PATH when invoking `sdkmanager --licenses` (flutter/flutter#127344) 2023-05-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from e04c14786d5a to 1ed9fc0caf55 (1 revision) (flutter/flutter#127343) 2023-05-22 38299943+VictorOhashi@users.noreply.github.com fix: Search anchor box location when used on nested navigator (flutter/flutter#127198) 2023-05-22 christopherfujino@gmail.com [flutter_tools] delete entitlements files after copying to macos build dir (flutter/flutter#126875) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC bmparr@google.com,rmistry@google.com,stuartmorgan@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

@OverRide

…r#127198) This PR is to fix the position of `SearchAnchor` when used with nested navigator. This solution is based on what `DropdownButton` internally do, looking to the closest `Navigator` to proper calculate the where to render `SearchViewRoute`. Fixes: flutter#126435 <details> <summary>Test case</summary> ```dart void main() => runApp(const NestedSearchBarApp()); class NestedSearchBarApp extends StatefulWidget { const NestedSearchBarApp({super.key}); @OverRide State<NestedSearchBarApp> createState() => _NestedSearchBarAppState(); } class _NestedSearchBarAppState extends State<NestedSearchBarApp> { final SearchController controller = SearchController(); @OverRide Widget build(BuildContext context) { final ThemeData themeData = ThemeData(useMaterial3: true); return MaterialApp( theme: themeData, builder: (BuildContext context, Widget? child) { return Scaffold( body: Row( children: <Widget>[ NavigationRail( selectedIndex: 1, destinations: const <NavigationRailDestination>[ NavigationRailDestination( icon: Icon(Icons.favorite_border), selectedIcon: Icon(Icons.favorite), label: Text('First'), ), NavigationRailDestination( icon: Icon(Icons.bookmark_border), selectedIcon: Icon(Icons.book), label: Text('Second'), ), ], ), const VerticalDivider(thickness: 1, width: 1), Expanded(child: child!) ], ), ); }, home: Scaffold( appBar: AppBar(title: const Text('Search Anchor Sample')), body: Column( children: <Widget>[ SearchAnchor( searchController: controller, builder: (BuildContext context, SearchController controller) { return IconButton( icon: const Icon(Icons.search), onPressed: () { controller.openView(); }, ); }, suggestionsBuilder: (BuildContext context, SearchController controller) { return List<ListTile>.generate(5, (int index) { final String item = 'item $index'; return ListTile( title: Text(item), onTap: () { setState(() { controller.closeView(item); }); }, ); }); }), Center( child: controller.text.isEmpty ? const Text('No item selected') : Text('Selected item: ${controller.value.text}'), ), ], ), ), ); } } ``` </details> <details> <summary>Before fix:</summary> ![Screenshot 2023-05-19 at 11 55 53](https://github.com/flutter/flutter/assets/38299943/c86747e5-6716-4e87-b3fd-ce7f0f943b92) </details> <details> <summary>After fix:</summary> ![Screenshot 2023-05-19 at 11 53 30](https://github.com/flutter/flutter/assets/38299943/d790ee49-e047-485c-87f4-7254acbdddfa) </details>

Similar to what was done on #127198, look for the closest navigator instead of screen size. Fixes: #128344

…flutter/flutter#127198)

fix: Search anchor box location when used on nested navigator

59e4444

flutter#126435

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels May 19, 2023

fix: Removed unused SearchAnchor method

b3635a3

VictorOhashi marked this pull request as ready for review May 19, 2023 15:09

VictorOhashi added 2 commits May 19, 2023 12:09

Merge branch 'master' into fix/search-anchor-nested-navigator

55b5fac

Merge branch 'master' into fix/search-anchor-nested-navigator

f64cbcf

HansMuller requested a review from QuncCccccc May 19, 2023 21:36

QuncCccccc reviewed May 19, 2023

View reviewed changes

Victor Ohashi and others added 2 commits May 22, 2023 10:31

test: Add test case to Search anchor

dac2243

Merge branch 'master' into fix/search-anchor-nested-navigator

e29e45e

VictorOhashi requested a review from QuncCccccc May 22, 2023 13:34

Merge branch 'master' into fix/search-anchor-nested-navigator

89de066

QuncCccccc approved these changes May 22, 2023

View reviewed changes

HansMuller approved these changes May 22, 2023

View reviewed changes

QuncCccccc mentioned this pull request May 22, 2023

[SearchAnchor.bar] Flutter M3 SearchAnchor.bar position issue. #126542

Closed

2 tasks

QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label May 22, 2023

auto-submit bot merged commit 7e3f1df into flutter:master May 22, 2023

VictorOhashi deleted the fix/search-anchor-nested-navigator branch May 22, 2023 20:40

engine-flutter-autoroll mentioned this pull request May 23, 2023

Roll Flutter from 343718945bcb to f86c529b2cd2 (22 revisions) flutter/packages#4066

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 23, 2023

7e3f1df fix: Search anchor box location when used on nested navigator (…

b7b4f1a

…flutter/flutter#127198)

VictorOhashi mentioned this pull request May 25, 2023

[CP] Fix Search anchor box location when used on nested navigator #127582

Closed

This was referenced May 25, 2023

Support minifcation for apps that depend on AGP 8 and integration_test #127628

Merged

i127682 android api 33 test support #127689

Merged

HansMuller mentioned this pull request May 26, 2023

Flutter Framework Team: Notable Commits #121415

Closed

This was referenced Jun 6, 2023

SearchAnchor View not resizing when in nested navigator #128344

Closed

fix: SearchAnchor View not resizing when in nested navigator #128357

Merged

auto-submit bot pushed a commit that referenced this pull request Jun 22, 2023

fix: SearchAnchor View not resizing when in nested navigator (#128357)

39bf968

Similar to what was done on #127198, look for the closest navigator instead of screen size. Fixes: #128344

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2023

7e3f1df fix: Search anchor box location when used on nested navigator (…

d8083fa

…flutter/flutter#127198)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

7e3f1df fix: Search anchor box location when used on nested navigator (…

0400ddc

…flutter/flutter#127198)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

7e3f1df fix: Search anchor box location when used on nested navigator (…

627b77e

…flutter/flutter#127198)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 17, 2023

7e3f1df fix: Search anchor box location when used on nested navigator (…

b9658e4

…flutter/flutter#127198)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Search anchor box location when used on nested navigator #127198

fix: Search anchor box location when used on nested navigator #127198

Uh oh!

VictorOhashi commented May 19, 2023 •

edited by guidezpl

Loading

Uh oh!

google-cla bot commented May 19, 2023

Uh oh!

QuncCccccc left a comment

Uh oh!

VictorOhashi commented May 22, 2023

Uh oh!

QuncCccccc left a comment

Uh oh!

QuncCccccc May 22, 2023

Uh oh!

HansMuller left a comment

Uh oh!

Uh oh!

fix: Search anchor box location when used on nested navigator #127198

fix: Search anchor box location when used on nested navigator #127198

Uh oh!

Conversation

VictorOhashi commented May 19, 2023 • edited by guidezpl Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

google-cla bot commented May 19, 2023

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

VictorOhashi commented May 22, 2023

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCccccc May 22, 2023

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

VictorOhashi commented May 19, 2023 •

edited by guidezpl

Loading