Skip to content

Conversation

@VictorOhashi
Copy link
Contributor

@VictorOhashi VictorOhashi commented May 19, 2023

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:

Screenshot 2023-05-19 at 11 55 53

After fix:

Screenshot 2023-05-19 at 11 53 30

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-dashboard 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
@google-cla
Copy link

google-cla bot commented May 19, 2023

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.

@VictorOhashi VictorOhashi marked this pull request as ready for review May 19, 2023 15:09
@HansMuller HansMuller requested a review from QuncCccccc May 19, 2023 21:36
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for the fix!!

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

@VictorOhashi
Copy link
Contributor Author

Thanks so much for the fix!!

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

Done

@VictorOhashi VictorOhashi requested a review from QuncCccccc May 22, 2023 13:34
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM:)

Navigator.of(context).pop();
}

Rect? getRect(GlobalKey key) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label May 22, 2023
@auto-submit auto-submit bot merged commit 7e3f1df into flutter:master May 22, 2023
@VictorOhashi VictorOhashi deleted the fix/search-anchor-nested-navigator branch May 22, 2023 20:40
auto-submit bot pushed a commit to flutter/packages that referenced this pull request May 23, 2023
flutter/flutter@3437189...f86c529

2023-05-23 [email protected] Roll Flutter Engine from 431ed51c6415 to 168b0bf3f70d (1 revision) (flutter/flutter#127382)
2023-05-23 [email protected] Roll Flutter Engine from cc79ae858591 to 431ed51c6415 (1 revision) (flutter/flutter#127381)
2023-05-23 [email protected] Roll Flutter Engine from 311438399a45 to cc79ae858591 (1 revision) (flutter/flutter#127377)
2023-05-23 [email protected] Roll Flutter Engine from c284cd10e7ab to 311438399a45 (1 revision) (flutter/flutter#127376)
2023-05-23 [email protected] Roll Flutter Engine from 8d6602b030be to c284cd10e7ab (2 revisions) (flutter/flutter#127372)
2023-05-23 [email protected] Add M3 date picker tests and fix divider (flutter/flutter#127197)
2023-05-23 [email protected] Roll Flutter Engine from 2586cbeeae37 to 8d6602b030be (2 revisions) (flutter/flutter#127370)
2023-05-23 [email protected] Manual roll Flutter Engine from a342a9186e69 to 2586cbeeae37 (14 revisions) (flutter/flutter#127369)
2023-05-23 [email protected] [Android] Adds `namespace` to module build file templates (flutter/flutter#126963)
2023-05-23 [email protected] Revert Engine to a342a9186e69 (flutter/flutter#127368)
2023-05-23 [email protected] Roll Flutter Engine from 2a325eed77d0 to 41e8d52a006a (2 revisions) (flutter/flutter#127365)
2023-05-23 [email protected] Roll Flutter Engine from a342a9186e69 to 2a325eed77d0 (7 revisions) (flutter/flutter#127364)
2023-05-23 [email protected] Remove null-safety argument from DartPad doc samples (flutter/flutter#127345)
2023-05-22 [email protected] Support keeping a bottom sheet with a DraggableScrollableSheet from closing on drag/fling to min extent (flutter/flutter#127339)
2023-05-22 [email protected] Fix wasm-opt location when using local_web_sdk (flutter/flutter#127355)
2023-05-22 [email protected] Roll Flutter Engine from 1ed9fc0caf55 to a342a9186e69 (3 revisions) (flutter/flutter#127352)
2023-05-22 [email protected] Show warning when attempting to flutter run on an ios device with developer mode turned off (flutter/flutter#125710)
2023-05-22 [email protected] Suggest that people move to "beta" when they upgrade on "master" (flutter/flutter#127146)
2023-05-22 [email protected] add test for setting JAVA_HOME and PATH when invoking `sdkmanager --licenses` (flutter/flutter#127344)
2023-05-22 [email protected] Roll Flutter Engine from e04c14786d5a to 1ed9fc0caf55 (1 revision) (flutter/flutter#127343)
2023-05-22 [email protected] fix: Search anchor box location when used on nested navigator (flutter/flutter#127198)
2023-05-22 [email protected] [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 [email protected],[email protected],[email protected] 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
CaseyHillers pushed a commit to CaseyHillers/flutter that referenced this pull request May 24, 2023
…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>
auto-submit bot pushed a commit that referenced this pull request Jun 22, 2023
Similar to what was done on #127198, look for the closest navigator instead of screen size.

Fixes: #128344
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[SearchAnchor.bar] Flutter M3 SearchAnchor.bar position issue. SearchAnchor View wrong position in nested navigator

3 participants