Text should still be centered when search bar height is less than 48 #128068

QuncCccccc · 2023-06-01T19:03:17Z

This fix can solve the alignment issue in SearchBar but we still need to investigate the root cause for the TextField. The
text baseline of TextField doesn't change when the height is less than 48 and greater than 40. The problem should be related to the minContainerHeight which is 48 by default but the contentHeight has become smaller than this min value already. Setting isDense/isCollapsed to true gives the minContainerHeight a smaller number which is 0.0:

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

Line 1086 in ff33555

    
           final double minContainerHeight = decoration.isDense! || decoration.isCollapsed || expands

Since isDense is used for the case where the text field has less vertical space, I just use this property in SearchBar.

Screen.Recording.2023-06-01.at.10.32.01.AM.mov

This is a demo to show the text baseline that doesn't change when we set the text field height under 48.
https://github.com/flutter/flutter/assets/36861262/ce2ee815-f1f5-493a-930e-0540a627bec8

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.

TahaTesser · 2023-06-01T20:03:15Z

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

@@ -1248,7 +1248,11 @@ class _SearchBarState extends State<SearchBar> {
                          enabledBorder: InputBorder.none,
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
-                          contentPadding: const EdgeInsets.symmetric(vertical: 12.0),
+                          contentPadding: EdgeInsets.zero,
+


Suggested change

justinmc

LGTM 👍

I gave another possible option for working around this, but it should be fine either way.

justinmc · 2023-06-01T20:03:41Z

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

+
+                          // Setting `isDense` to true to allow the text field height to be
+                          // smaller than 48.0
+                          isDense: true,


Does setting isDense to true affect anything else that you don't want it to affect? I think you might also be able to get the same effect by setting expands to true instead. Maybe that will create other problems though haha. Whatever works is fine.

Because currently the TextField in SearchBar is only allowed to have input text and hint text, it doesn't have any other properties like perfix/prefixIcon/suffix/label/..., so I think using isDense should be safe:).

justinmc · 2023-06-01T20:03:51Z

packages/flutter/test/material/search_anchor_test.dart

@@ -708,6 +708,29 @@ void main() {
    expect(helperText.style?.color, focusedColor);
  });

+  // regression test for https://github.com/flutter/flutter/issues/127092.


Nit: Capital R at the start here.

HansMuller

Clever workaround! LGTM

…than 48 (flutter/flutter#128068)

Roll Flutter from 3db9504 to 0b74153 (108 revisions) flutter/flutter@3db9504...0b74153 2023-06-03 engine-flutter-autoroll@skia.org Roll Flutter Engine from 54293721816a to c838a1b05924 (2 revisions) (flutter/flutter#128161) 2023-06-03 engine-flutter-autoroll@skia.org Roll Flutter Engine from 8769e9ce3a90 to 54293721816a (8 revisions) (flutter/flutter#128158) 2023-06-03 goderbauer@google.com Prefix for dart:ui multiview change (flutter/flutter#128152) 2023-06-02 aam@google.com Roll dds dependency to 2.8.3 for expression evaluation upcoming fixes. (flutter/flutter#128124) 2023-06-02 engine-flutter-autoroll@skia.org Roll Flutter Engine from f3f6a020595d to 8769e9ce3a90 (3 revisions) (flutter/flutter#128149) 2023-06-02 engine-flutter-autoroll@skia.org Roll Flutter Engine from b4250acbf3ca to f3f6a020595d (3 revisions) (flutter/flutter#128147) 2023-06-02 flar@google.com Reland "Remove obsolete drawShadow bounds workaround (#127052)" (flutter/flutter#127231) 2023-06-02 engine-flutter-autoroll@skia.org Roll Flutter Engine from c6e9383f2143 to b4250acbf3ca (8 revisions) (flutter/flutter#128142) 2023-06-02 goderbauer@google.com Pre-migration for dart:ui multi view changes (flutter/flutter#128092) 2023-06-02 goderbauer@google.com Remove LiveTestRenderView (flutter/flutter#127882) 2023-06-02 engine-flutter-autoroll@skia.org Roll Flutter Engine from 02d6fbb68b69 to c6e9383f2143 (15 revisions) (flutter/flutter#128119) 2023-06-02 5236035+fzyzcjy@users.noreply.github.com Tiny remove unnecessary method in text_selection.dart (flutter/flutter#127480) 2023-06-02 vashworth@google.com Workaround for Dart VM timeout (flutter/flutter#127875) 2023-06-02 goderbauer@google.com Make --flutter-repo analyze whole repo (flutter/flutter#127990) 2023-06-02 engine-flutter-autoroll@skia.org Roll Packages from f0513ae to 75085ed (3 revisions) (flutter/flutter#128121) 2023-06-02 50433979+natsuk4ze@users.noreply.github.com [Refactor] fix quote style in template (flutter/flutter#127762) 2023-06-02 engine-flutter-autoroll@skia.org Roll Flutter Engine from 3a453f2ccb77 to 02d6fbb68b69 (14 revisions) (flutter/flutter#128089) 2023-06-02 goderbauer@google.com Fix typos in labels (flutter/flutter#128093) 2023-06-02 zanderso@users.noreply.github.com Revert "Fix issue where DevTools would not be immediately available when using --start-paused" (flutter/flutter#128117) 2023-06-02 goderbauer@google.com Sync Lints (flutter/flutter#127976) 2023-06-02 hans.muller@gmail.com Updated TabBar and ToggleButtons examples (flutter/flutter#128088) 2023-06-02 36861262+QuncCccccc@users.noreply.github.com Text should still be centered when search bar height is less than 48 (flutter/flutter#128068) 2023-06-02 fluttergithubbot@gmail.com Roll pub packages (flutter/flutter#128053) 2023-06-01 tessertaha@gmail.com Add `FilterChip.elevated`, `ChoiceChip.elevated`, & `ActionChip.elevated` variants (flutter/flutter#128049) 2023-06-01 hans.muller@gmail.com Updated custom ListTile examples (flutter/flutter#128071) 2023-06-01 bkonyi@google.com Fix issue where DevTools would not be immediately available when using --start-paused (flutter/flutter#126698) 2023-06-01 katelovett@google.com Add error message when sliver overlap absorber is missing (flutter/flutter#128075) 2023-06-01 hans.muller@gmail.com Updated Menu examples (flutter/flutter#128080) 2023-06-01 5236035+fzyzcjy@users.noreply.github.com Add retry flag to flutter_test (flutter/flutter#125851) 2023-06-01 christopherfujino@gmail.com [flutter_tools] Use process matcher for multidex test (flutter/flutter#127996) 2023-06-01 hans.muller@gmail.com Updated InputDecoratorExamples for M3 (flutter/flutter#128065) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from 7c0a639efd0a to 3a453f2ccb77 (1 revision) (flutter/flutter#128064) 2023-06-01 christopherfujino@gmail.com migrate the package_autoroller from querying by label to title (flutter/flutter#128066) 2023-06-01 hans.muller@gmail.com Revised Floating Action Button examples (flutter/flutter#128058) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from fdd39c421fb9 to 7c0a639efd0a (2 revisions) (flutter/flutter#128056) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from c8e1a8d6fb57 to fdd39c421fb9 (1 revision) (flutter/flutter#128050) 2023-06-01 chillers@google.com [labeler] Remove use of any (flutter/flutter#128011) 2023-06-01 jonahwilliams@google.com [framework] remove reference to closed issue. (flutter/flutter#128007) 2023-06-01 engine-flutter-autoroll@skia.org Roll Packages from 95bb793 to f0513ae (3 revisions) (flutter/flutter#128045) 2023-06-01 vasilich6107@users.noreply.github.com Add fallback font to IconData class (flutter/flutter#127269) 2023-06-01 mdebbar@google.com [web] Assert route names start with / if using PathUrlStrategy (flutter/flutter#127986) 2023-06-01 andrewrkolos@gmail.com [tool] In `flutter doctor -v`, warn when Android Studio version could not be detected. (flutter/flutter#126395) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from 8339c71a963c to c8e1a8d6fb57 (1 revision) (flutter/flutter#128035) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from bc81133892a6 to 8339c71a963c (1 revision) (flutter/flutter#128034) 2023-06-01 engine-flutter-autoroll@skia.org Roll Flutter Engine from e235f47164fa to bc81133892a6 (1 revision) (flutter/flutter#128026) 2023-06-01 72562119+tgucio@users.noreply.github.com Fixes in Cupertino translations (flutter/flutter#127872) ...

…than 48 (flutter/flutter#128068)

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

QuncCccccc marked this pull request as ready for review June 1, 2023 19:55

QuncCccccc requested review from HansMuller, TahaTesser, justinmc and LongCatIsLooong and removed request for TahaTesser June 1, 2023 19:55

TahaTesser approved these changes Jun 1, 2023

View reviewed changes

justinmc approved these changes Jun 1, 2023

View reviewed changes

HansMuller approved these changes Jun 1, 2023

View reviewed changes

QuncCccccc added 3 commits June 1, 2023 15:15

Fix text alignment when search bar height is less than 48

2f3be28

Update unit test for contentPadding

8fc1462

Address PR comments

41bfacc

QuncCccccc force-pushed the fix_searchbar_with_small_height branch from 9bcaa5c to 41bfacc Compare June 1, 2023 22:15

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

auto-submit bot merged commit ab70aea into master Jun 2, 2023

auto-submit bot deleted the fix_searchbar_with_small_height branch June 2, 2023 00:27

HansMuller mentioned this pull request Jun 2, 2023

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll mentioned this pull request Jun 3, 2023

Roll Flutter from 3db9504dcda2 to 0b7415356e07 (108 revisions) flutter/packages#4135

Merged

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

ab70aea Text should still be centered when search bar height is less …

fa63904

…than 48 (flutter/flutter#128068)

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

ab70aea Text should still be centered when search bar height is less …

980307a

…than 48 (flutter/flutter#128068)

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

ab70aea Text should still be centered when search bar height is less …

26902e1

…than 48 (flutter/flutter#128068)

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

ab70aea Text should still be centered when search bar height is less …

74dff7c

…than 48 (flutter/flutter#128068)

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

ab70aea Text should still be centered when search bar height is less …

8b6a41b

…than 48 (flutter/flutter#128068)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Text should still be centered when search bar height is less than 48 #128068

Text should still be centered when search bar height is less than 48 #128068

Uh oh!

QuncCccccc commented Jun 1, 2023 •

edited

Loading

Uh oh!

TahaTesser Jun 1, 2023

Uh oh!

justinmc left a comment

Uh oh!

justinmc Jun 1, 2023

Uh oh!

QuncCccccc Jun 1, 2023

Uh oh!

justinmc Jun 1, 2023

Uh oh!

HansMuller left a comment

Uh oh!

Uh oh!

Text should still be centered when search bar height is less than 48 #128068

Text should still be centered when search bar height is less than 48 #128068

Uh oh!

Conversation

QuncCccccc commented Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

TahaTesser Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jun 1, 2023

Choose a reason for hiding this comment

Uh oh!

justinmc Jun 1, 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!

QuncCccccc commented Jun 1, 2023 •

edited

Loading