Unverified Commit ab70aea3 authored by Qun Cheng's avatar Qun Cheng Committed by GitHub

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

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: https://github.com/flutter/flutter/blob/ff33555b239de4c17e7149db17eb70bcf5dee215/packages/flutter/lib/src/material/input_decorator.dart#L1086

Since [`isDense`](https://github.com/flutter/flutter/blob/ff33555b239de4c17e7149db17eb70bcf5dee215/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
parent 4a8780d2
......@@ -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,
)),
),
),
......
......@@ -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);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment