Create `SearchBar` and `SearchBarTheme` #122309

QuncCccccc · 2023-03-09T17:30:16Z

This PR is to create a SearchBar widget which is the default trigger for a SearchView.
A SearchAnchor widget will be created soon to show search view.

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

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

Related to #117483.

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.

dev/tools/gen_defaults/lib/search_bar_template.dart

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

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

guidezpl

Nice work, just gave it a quick first pass.

dev/tools/gen_defaults/lib/search_bar_template.dart

guidezpl · 2023-03-13T15:56:57Z

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

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/widgets.dart';


Should this file be name search_bar.dart?

Because I think the search bar will only be used for the widget SearchAnchor which will be created in the future PR, so just want to put them in the same file.

I don't know what search anchor refers to, I couldn't find a mention in the guidelines

Sorry for the confusion. To open a search view, I'm creating a SearchAnchor widget so that we can get all the anchor(SearchBar or IconButton or any widget) information, such as size, position and etc. Here's the design doc https://docs.google.com/document/d/1_WOcgddfJ7OyYyaCJhkIWgOYywj2jDeMooFsKg012B4/edit#

Thanks! I'm a bit confused because it talks about the introduction of 2 widgets, and the SearchView section only mentions SearchAnchor. Are these terms used interchangeably and should s/anchor/view/?

If SearchView and SearchAnchor are distinct widgets, is there a way to avoid having 3 public widgets? 2 would be ideal.

I see. I think we will only need SearchBar and SearchAnchor widgets. Will update the design soon! Thanks:)

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

guidezpl · 2023-03-13T15:59:39Z

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

+/// The [leading] widget is on the left side of the bar and should contain either
+/// a navigational action (such as a menu or up-arrow) or a non-functional
+/// search icon.
+///
+/// The [trailing] is an optional list. There should be up to two action icons
+/// that are located on the bar’s right-hand side. These actions can represent
+/// additional modes of searching (like voice search), a separate high-level
+/// action (such as current location) or an overflow menu.


Should this be in the constructor docs?

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

HansMuller

Mostly just small stuff. This is looking good.

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

HansMuller · 2023-03-14T23:07:51Z

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

+    this.padding,
+    this.textStyle,
+    this.hintStyle,
+  }) : assert(trailing == null || trailing.length <= 2);


Do we really want to prevent developers from using 3 or more trailing widgets? Although it's definitely not advisable, it doesn't seem worth asserting if a developer founds a justification for it.

I see. Removed this assertion.

HansMuller · 2023-03-14T23:38:13Z

packages/flutter/test/material/search_bar_theme_test.dart

+      surfaceTintColor: MaterialStatePropertyAll<Color>(Color(0xfffffff3)),
+      overlayColor: MaterialStatePropertyAll<Color>(Color(0xfffffff4)),
+      side: MaterialStatePropertyAll<BorderSide>(
+          BorderSide(width: 2.0, color: Color(0xfffffff5))),


this can be on one line

Fixed this and others! I think the IDE did this kind of format automatically. Sorry for not catching this.

packages/flutter/test/material/search_bar_theme_test.dart

HansMuller

LGTM

guidezpl · 2023-03-16T09:32:34Z

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

+  /// The surface tint color of the button's [Material].
+  ///
+  /// See [Material.surfaceTintColor] for more details.
+  ///
+  /// If null, the value of [SearchBarThemeData.surfaceTintColor] will be used.
+  /// If this is also null, then the default value is [ColorScheme.surfaceTint].
+  final MaterialStateProperty<Color?>? surfaceTintColor;
+
+  /// The highlight color that's typically used to indicate that
+  /// the button is focused, hovered, or pressed.


Can you clarify what "the button" is?

Should be "Search bar". Thanks for catching this. Fixed!

guidezpl

LGTM pending documentation update for surfaceTintColor and overlayColor

…2309)

flutter-dashboard bot added 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 9, 2023

HansMuller reviewed Mar 9, 2023

View reviewed changes

dev/tools/gen_defaults/lib/search_bar_template.dart Outdated Show resolved Hide resolved

HansMuller reviewed Mar 9, 2023

View reviewed changes

dev/tools/gen_defaults/lib/search_bar_template.dart Outdated Show resolved Hide resolved

HansMuller reviewed Mar 9, 2023

View reviewed changes

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

HansMuller reviewed Mar 9, 2023

View reviewed changes

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

HansMuller reviewed Mar 9, 2023

View reviewed changes

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

HansMuller reviewed Mar 9, 2023

View reviewed changes

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

QuncCccccc force-pushed the create_search_bar branch from 0b8f764 to c021b4c Compare March 10, 2023 22:14

QuncCccccc changed the title ~~[WIP]Create SearchBar and SearchTheme~~ Create SearchBar and SearchTheme Mar 10, 2023

QuncCccccc changed the title ~~Create SearchBar and SearchTheme~~ Create SearchBar and SearchTheme Mar 10, 2023

QuncCccccc changed the title ~~Create SearchBar and SearchTheme~~ Create SearchBar and SearchBarTheme Mar 10, 2023

QuncCccccc force-pushed the create_search_bar branch 2 times, most recently from da283f3 to 4403dac Compare March 10, 2023 22:45

QuncCccccc marked this pull request as ready for review March 10, 2023 23:45

guidezpl reviewed Mar 13, 2023

View reviewed changes

QuncCccccc force-pushed the create_search_bar branch from 70e4a5e to 7557923 Compare March 13, 2023 17:28

QuncCccccc requested a review from goderbauer March 14, 2023 22:02

HansMuller reviewed Mar 14, 2023

View reviewed changes

Qun Cheng added 8 commits March 15, 2023 13:02

Create search bar token template

a8000d5

Create SearchBar widget

7c2b029

Create SearchBarTheme and add tests

900fa76

Remove unused import

f23b7ee

Update doc

01c8f3e

Fix failed tests

1ffae03

Fix PR comments

967f901

Fix PR comments

ea22491

QuncCccccc force-pushed the create_search_bar branch from 08d118c to ea22491 Compare March 15, 2023 20:03

HansMuller approved these changes Mar 15, 2023

View reviewed changes

guidezpl reviewed Mar 16, 2023

View reviewed changes

guidezpl approved these changes Mar 16, 2023

View reviewed changes

Fix typo

199eb01

QuncCccccc merged commit 5180e45 into flutter:master Mar 16, 2023
129 of 130 checks passed

engine-flutter-autoroll mentioned this pull request Mar 17, 2023

Roll Flutter from 67e5f663d075 to 53dfd23b043f (39 revisions) flutter/packages#3484

Merged

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

5180e4508 Create SearchBar and SearchBarTheme (flutter/flutter#12…

3a5df9d

…2309)

HansMuller mentioned this pull request Mar 17, 2023

Flutter Framework Team: Notable Commits #121415

Open

SirusCodes mentioned this pull request Mar 21, 2023

Introduce Search bar and view #117483

Closed

HansMuller mentioned this pull request Mar 31, 2023

New Widget: SearchBar #17119

Closed

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

5180e4508 Create SearchBar and SearchBarTheme (flutter/flutter#12…

5dca9ba

…2309)

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

5180e4508 Create SearchBar and SearchBarTheme (flutter/flutter#12…

523959f

…2309)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create `SearchBar` and `SearchBarTheme` #122309

Create `SearchBar` and `SearchBarTheme` #122309

QuncCccccc commented Mar 9, 2023 •

edited

guidezpl left a comment

guidezpl Mar 13, 2023

QuncCccccc Mar 13, 2023

guidezpl Mar 13, 2023

QuncCccccc Mar 13, 2023

guidezpl Mar 14, 2023

QuncCccccc Mar 14, 2023

guidezpl Mar 13, 2023

HansMuller left a comment

HansMuller Mar 14, 2023

QuncCccccc Mar 15, 2023

HansMuller Mar 14, 2023

QuncCccccc Mar 15, 2023

HansMuller left a comment

guidezpl Mar 16, 2023

QuncCccccc Mar 16, 2023

guidezpl left a comment

Create SearchBar and SearchBarTheme #122309

Create SearchBar and SearchBarTheme #122309

Conversation

QuncCccccc commented Mar 9, 2023 • edited

Pre-launch Checklist

guidezpl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guidezpl left a comment

Choose a reason for hiding this comment

Create `SearchBar` and `SearchBarTheme` #122309

Create `SearchBar` and `SearchBarTheme` #122309

QuncCccccc commented Mar 9, 2023 •

edited