firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Fixes #127092

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: ff33555b23/packages/flutter/lib/src/material/input_decorator.dart (L1086)

Since [`isDense`](ff33555b23/packages/flutter/lib/src/material/input_decorator.dart (L3907)) is used for the case where the text field has less vertical space, I just use this property in SearchBar.

https://github.com/flutter/flutter/assets/36861262/6ddc8e90-1b47-4dd5-9a57-59b86cafec6d

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
This commit is contained in:
Qun Cheng 2023-06-01 17:27:22 -07:00 committed by GitHub
parent 4a8780d228
commit ab70aea3ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/flutter/lib/src/material/search_anchor.dart
View File

@ -1248,7 +1248,10 @@ class _SearchBarState extends State<SearchBar> {
enabledBorder: InputBorder.none,
border: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(vertical: 12.0),
contentPadding: EdgeInsets.zero,
// Setting `isDense` to true to allow the text field height to be
// smaller than 48.0
isDense: true,
)),
),
),

29
packages/flutter/test/material/search_anchor_test.dart
View File

@ -708,6 +708,29 @@ void main() {
expect(helperText.style?.color, focusedColor);
});
// Regression test for https://github.com/flutter/flutter/issues/127092.
testWidgets('The text is still centered when SearchBar text field is smaller than 48', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Center(
child: Material(
child: SearchBar(
constraints: BoxConstraints.tightFor(height: 35.0),
),
),
),
),
);
await tester.enterText(find.byType(TextField), 'input text');
final Finder textContent = find.text('input text');
final double textCenterY = tester.getCenter(textContent).dy;
final Finder searchBar = find.byType(SearchBar);
final double searchBarCenterY = tester.getCenter(searchBar).dy;
expect(textCenterY, searchBarCenterY);
});
testWidgets('The search view defaults', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: true);
final ColorScheme colorScheme = theme.colorScheme;
@ -1670,7 +1693,7 @@ void main() {
});
testWidgets('Search view route does not throw exception during pop animation', (WidgetTester tester) async {
// regression test for https://github.com/flutter/flutter/issues/126590.
// Regression test for https://github.com/flutter/flutter/issues/126590.
await tester.pumpWidget(MaterialApp(
home: Material(
child: Center(
@ -1747,7 +1770,7 @@ void main() {
});
// regression tests for https://github.com/flutter/flutter/issues/126623
// Regression tests for https://github.com/flutter/flutter/issues/126623
group('Overall InputDecorationTheme does not impact SearchBar and SearchView', () {
const InputDecorationTheme inputDecorationTheme = InputDecorationTheme(
@ -1789,7 +1812,7 @@ void main() {
expect(decoration?.fillColor, null);
expect(decoration?.focusColor, null);
expect(decoration?.hoverColor, null);
expect(decoration?.contentPadding, const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 12.0));
expect(decoration?.contentPadding, EdgeInsets.zero);
expect(decoration?.hintStyle?.color, theme.colorScheme.onSurfaceVariant);
}