Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create SearchAnchor and SearchViewTheme Widget #123256

Merged
merged 37 commits into from Mar 28, 2023

Conversation

QuncCccccc
Copy link
Contributor

@QuncCccccc QuncCccccc commented Mar 22, 2023

This PR is to create a SearchAnchor widget in which we can use an anchor to trigger a search view. Typically an anchor is a SearchBar, or IconButton.

Screenshot 2023-03-23 at 10 26 01 AM   Screenshot 2023-03-23 at 10 26 35 AM

In order to use the SearchAnchor with the new Material 3 colors, turn on the useMaterial3 flag in the ThemeData:

  return MaterialApp(
    theme: ThemeData(useMaterial3: true),
    // ...
  );

Fixes #117483.

This is an example to show how we can use the SearchAnchor.bar() constructor. The sample code is in examples/api/lib/material/search_anchor/search_anchor.0.dart

Screen.Recording.2023-03-22.at.11.15.25.AM.mov


Same example running on mobile devices shows full screen.

Screen.Recording.2023-03-22.at.11.06.16.AM.mov


Another example in examples/api/lib/material/search_anchor/search_anchor.1.dart is to show how we can use SliverAppBar and SearchAnchor to get a pinned/floating effect. To achieve this, we need to add an additional api clipBehavior to AppBar, otherwise the shadow might be clipped.
See the commit.

Screen.Recording.2023-03-22.at.11.09.16.AM.mov

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 d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos documentation f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels. labels Mar 22, 2023
@QuncCccccc QuncCccccc changed the title [WIP]Create SearchAnchor and SearchViewTheme Widget Create SearchAnchor and SearchViewTheme Widget Mar 23, 2023
@QuncCccccc QuncCccccc marked this pull request as ready for review March 23, 2023 17:34
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
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.

This looks great! Only real bit of feedback here is a suggestion about the "anchorBuilder" name.

packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
}

void _closeView(String? selectedText) {
if (selectedText != null) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this mean that if nothing was selected the caller will see a stale value?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. When _closeView is called without providing any text, only the search view route is popped and the controller's value will not change. Or another way I can think of is, when selectedText is null, we just clear the value that the controller originally hold. Do you think if this makes sense?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think the way you have it now is OK; it is pretty clear what's going to happen when closeView(null) is called.

child: AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
final Animation<double> curvedAnimation = CurvedAnimation(
Copy link
Contributor

Choose a reason for hiding this comment

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

https://api.flutter.dev/flutter/animation/CurvedAnimation/reverseCurve.html

If you use a non-null reverseCurve you might want to hold this object in a State object rather than recreating it each time your widget builds in order to take advantage of the state in this object that avoids visual discontinuities.

If bringing the page up and down (before the animation completes) looks janky, making the CurvedAnimation part of this Route's state might be a good idea. Could be handled in a separate PR.

Copy link
Contributor Author

@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 a lot for the feedback! Fixing it now.

}

void _closeView(String? selectedText) {
if (selectedText != null) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. When _closeView is called without providing any text, only the search view route is popped and the controller's value will not change. Or another way I can think of is, when selectedText is null, we just clear the value that the controller originally hold. Do you think if this makes sense?

packages/flutter/lib/src/material/search_anchor.dart Outdated Show resolved Hide resolved
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.

Assuming that anchorBuilder is renamed to builder, LGTM!

@QuncCccccc QuncCccccc force-pushed the create_search_anchor branch 4 times, most recently from a867b97 to 555bb69 Compare March 28, 2023 00:19
@QuncCccccc QuncCccccc merged commit 0300cfa into flutter:master Mar 28, 2023
138 checks passed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2023
@QuncCccccc QuncCccccc mentioned this pull request Apr 5, 2023
8 tasks
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Introduce Search bar and view
2 participants