Skip to content

F
Front-End
Unverified Commit db0b249f authored by Renzo Olivares's avatar Renzo Olivares Committed by GitHub
Browse files
Options

Add label widget parameter to InputDecoration (#86810)

parent ccc72fa5
Hide whitespace changes
Inline Side-by-side
Showing with 485 additions and 13 deletions
packages/flutter/lib/src/material/input_decorator.dart
View file @ db0b249f
......@@ -2090,7 +2090,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
// hint would.
bool get _hasInlineLabel {
return !widget._labelShouldWithdraw
&& decoration!.labelText != null
&& (decoration!.labelText != null || decoration!.label != null)
&& decoration!.floatingLabelBehavior != FloatingLabelBehavior.always;
}
......@@ -2205,7 +2205,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
final TextStyle inlineLabelStyle = themeData.fixTextFieldOutlineLabel
? inlineStyle.merge(decoration!.labelStyle).copyWith(height: 1)
: inlineStyle.merge(decoration!.labelStyle);
final Widget? label = decoration!.labelText == null ? null : _Shaker(
final Widget? label = decoration!.labelText == null && decoration!.label == null ? null : _Shaker(
animation: _shakingLabelController.view,
child: AnimatedOpacity(
duration: _kTransitionDuration,
......@@ -2217,7 +2217,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
style: widget._labelShouldWithdraw
? _getFloatingLabelStyle(themeData)
: inlineLabelStyle,
child: Text(
child: decoration!.label ?? Text(
decoration!.labelText!,
overflow: TextOverflow.ellipsis,
textAlign: textAlign,
......@@ -2521,6 +2521,7 @@ class InputDecoration {
/// Similarly, only one of [suffix] and [suffixText] can be specified.
const InputDecoration({
this.icon,
this.label,
this.labelText,
this.labelStyle,
this.floatingLabelStyle,
......@@ -2566,6 +2567,7 @@ class InputDecoration {
this.alignLabelWithHint,
this.constraints,
}) : assert(enabled != null),
assert(!(label != null && labelText != null), 'Declaring both label and labelText is not supported.'),
assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not supported.'),
assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not supported.');
......@@ -2587,6 +2589,7 @@ class InputDecoration {
this.enabled = true,
}) : assert(enabled != null),
icon = null,
label = null,
labelText = null,
labelStyle = null,
floatingLabelStyle = null,
......@@ -2639,13 +2642,62 @@ class InputDecoration {
/// See [Icon], [ImageIcon].
final Widget? icon;
/// Text that describes the input field.
/// Optional widget that describes the input field.
///
/// {@template flutter.material.inputDecoration.label}
/// When the input field is empty and unfocused, the label is displayed on
/// top of the input field (i.e., at the same location on the screen where
/// text may be entered in the input field). When the input field receives
/// focus (or if the field is non-empty), the label moves above (i.e.,
/// vertically adjacent to) the input field.
/// {@endtemplate}
///
/// This can be used, for example, to add multiple [TextStyle]'s to a label that would
/// otherwise be specified using [labelText], which only takes one [TextStyle].
///
/// {@tool dartpad --template=stateless_widget_scaffold}
///
/// This example shows a `TextField` with a [Text.rich] widget as the [label].
/// The widget contains multiple [Text] widgets with different [TextStyle]'s.
///
/// ```dart
/// Widget build(BuildContext context) {
/// return const Center(
/// child: TextField(
/// decoration: InputDecoration(
/// label: Text.rich(
/// TextSpan(
/// children: <InlineSpan>[
/// WidgetSpan(
/// child: Text(
/// 'Username',
/// ),
/// ),
/// WidgetSpan(
/// child: Text(
/// '*',
/// style: TextStyle(color: Colors.red),
/// ),
/// ),
/// ],
/// ),
/// ),
/// ),
/// ),
/// );
/// }
/// ```
/// {@end-tool}
///
/// Only one of [label] and [labelText] can be specified.
final Widget? label;
/// Optional text that describes the input field.
///
/// {@macro flutter.material.inputDecoration.label}
///
/// If a more elaborate label is required, consider using [label] instead.
/// Only one of [label] and [labelText] can be specified.
final String? labelText;
/// The style to use for the [labelText] when the label is on top of the
......@@ -3324,6 +3376,7 @@ class InputDecoration {
/// by the new values.
InputDecoration copyWith({
Widget? icon,
Widget? label,
String? labelText,
TextStyle? labelStyle,
TextStyle? floatingLabelStyle,
......@@ -3371,6 +3424,7 @@ class InputDecoration {
}) {
return InputDecoration(
icon: icon ?? this.icon,
label: label ?? this.label,
labelText: labelText ?? this.labelText,
labelStyle: labelStyle ?? this.labelStyle,
floatingLabelStyle: floatingLabelStyle ?? this.floatingLabelStyle,
......@@ -3462,6 +3516,7 @@ class InputDecoration {
return false;
return other is InputDecoration
&& other.icon == icon
&& other.label == label
&& other.labelText == labelText
&& other.labelStyle == labelStyle
&& other.floatingLabelStyle == floatingLabelStyle
......@@ -3512,6 +3567,7 @@ class InputDecoration {
int get hashCode {
final List<Object?> values = <Object?>[
icon,
label,
labelText,
floatingLabelStyle,
labelStyle,
......@@ -3566,6 +3622,7 @@ class InputDecoration {
String toString() {
final List<String> description = <String>[
if (icon != null) 'icon: $icon',
if (label != null) 'label: $label',
if (labelText != null) 'labelText: "$labelText"',
if (floatingLabelStyle != null) 'floatingLabelStyle: "$floatingLabelStyle"',
if (helperText != null) 'helperText: "$helperText"',
......
packages/flutter/test/material/input_decorator_test.dart
View file @ db0b249f
......@@ -142,7 +142,7 @@ double getOpacity(WidgetTester tester, String textValue) {
}
void main() {
testWidgets('InputDecorator input/label layout', (WidgetTester tester) async {
testWidgets('InputDecorator input/label text layout', (WidgetTester tester) async {
// The label appears above the input text
await tester.pumpWidget(
buildInputDecorator(
......@@ -286,14 +286,12 @@ void main() {
// The label animates upwards from it's initial position
// above the input text. The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY50ms, inExclusiveRange(12.0, 28.0));
await tester.pump(const Duration(milliseconds: 50));
final double labelY100ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY100ms, inExclusiveRange(12.0, labelY50ms));
}
await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY50ms, inExclusiveRange(12.0, 28.0));
await tester.pump(const Duration(milliseconds: 50));
final double labelY100ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY100ms, inExclusiveRange(12.0, labelY50ms));
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
......@@ -364,6 +362,341 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, tester.getBottomLeft(find.text('hint')).dy);
});
testWidgets('InputDecorator input/label widget layout', (WidgetTester tester) async {
const Key key = Key('l');
// The label appears above the input text.
await tester.pumpWidget(
buildInputDecorator(
// isEmpty: false (default)
// isFocused: false (default)
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
),
),
);
await tester.pumpAndSettle();
// Overall height for this InputDecorator is 56dps:
// 12 - top padding
// 12 - floating label (ahem font size 16dps * 0.75 = 12)
// 4 - floating label / input text gap
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 12.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 24.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 1.0);
// The label appears within the input when there is no text content.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
// isFocused: false (default)
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
),
),
);
await tester.pumpAndSettle();
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
// The label appears above the input text when there is no content and the
// floatingLabelBehavior is set to always.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
// isFocused: false (default)
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
floatingLabelBehavior: FloatingLabelBehavior.always,
),
),
);
await tester.pumpAndSettle();
expect(tester.getTopLeft(find.byKey(key)).dy, 12.0);
// The label appears within the input text when there is content and
// the floatingLabelBehavior is set to never.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: false,
// isFocused: false (default)
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
floatingLabelBehavior: FloatingLabelBehavior.never,
),
),
);
await tester.pumpAndSettle();
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
// Overall height for this InputDecorator is 56dps:
// 12 - top padding
// 12 - floating label (ahem font size 16dps * 0.75 = 12)
// 4 - floating label / input text gap
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
// isFocused: true increases the border's weight from 1.0 to 2.0
// but does not change the overall height.
await tester.pumpWidget(
buildInputDecorator(
// isEmpty: false (default)
isFocused: true,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
),
),
);
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 12.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 24.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 2.0);
// isEmpty: true causes the label to be aligned with the input text.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: false,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
),
),
);
// The label animates downwards from it's initial position
// above the input text. The animation's duration is 200ms.
await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY50ms, inExclusiveRange(12.0, 20.0));
await tester.pump(const Duration(milliseconds: 50));
final double labelY100ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY100ms, inExclusiveRange(labelY50ms, 20.0));
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 36.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 1.0);
// isFocused: true causes the label to move back up above the input text.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: true,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
),
),
);
// The label animates upwards from it's initial position
// above the input text. The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY50ms, inExclusiveRange(12.0, 28.0));
await tester.pump(const Duration(milliseconds: 50));
final double labelY100ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY100ms, inExclusiveRange(12.0, labelY50ms));
}
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 12.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 24.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 2.0);
// enabled: false produces a hairline border if filled: false (the default)
// The widget's size and layout is the same as for enabled: true.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: false,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
enabled: false,
),
),
);
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 36.0);
expect(getBorderWeight(tester), 0.0);
// enabled: false produces a transparent border if filled: true.
// The widget's size and layout is the same as for enabled: true.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: false,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
enabled: false,
filled: true,
),
),
);
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.byKey(key)).dy, 20.0);
expect(tester.getBottomLeft(find.byKey(key)).dy, 36.0);
expect(getBorderColor(tester), Colors.transparent);
// alignLabelWithHint: true positions the label at the text baseline,
// aligned with the hint.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: false,
decoration: const InputDecoration(
label: Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(text: 'label'),
WidgetSpan(
child: Text('*', style: TextStyle(color: Colors.red),
),
),
],
),
key: key,
),
alignLabelWithHint: true,
hintText: 'hint',
),
),
);
await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.byKey(key)).dy, tester.getTopLeft(find.text('hint')).dy);
expect(tester.getBottomLeft(find.byKey(key)).dy, tester.getBottomLeft(find.text('hint')).dy);
});
group('alignLabelWithHint', () {
group('expands false', () {
testWidgets('multiline TextField no-strut', (WidgetTester tester) async {
......@@ -4691,4 +5024,86 @@ void main() {
expect(tester.takeException(), isNull);
});
testWidgets('InputDecorationTheme floatingLabelStyle overrides label widget styles when the widget is a text widget (focused)', (WidgetTester tester) async {
const TextStyle style16 = TextStyle(fontFamily: 'Ahem', fontSize: 16.0);
final TextStyle floatingLabelStyle = style16.merge(const TextStyle(color: Colors.indigo));
// This test also verifies that the default InputDecorator provides a
// "small concession to backwards compatibility" by not padding on
// the left and right. If filled is true or an outline border is
// provided then the horizontal padding is included.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: true, // Label appears floating above input field.
inputDecorationTheme: InputDecorationTheme(
floatingLabelStyle: floatingLabelStyle,
// filled: false (default) - don't pad by left/right 12dps
),
decoration: const InputDecoration(
label: Text.rich(
TextSpan(text: 'label'),
),
),
),
);
// Overall height for this InputDecorator is 56dps:
// 12 - top padding
// 12 - floating label (ahem font size 16dps * 0.75 = 12)
// 4 - floating label / input text gap
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('label')).dy, 12.0);
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 2.0);
// Verify that the styles were passed along
expect(getLabelStyle(tester).color, floatingLabelStyle.color);
});
testWidgets('InputDecorationTheme labelStyle overrides label widget styles when the widget is a text widget', (WidgetTester tester) async {
const TextStyle style16 = TextStyle(fontFamily: 'Ahem', fontSize: 16.0);
final TextStyle labelStyle = style16.merge(const TextStyle(color: Colors.purple));
// This test also verifies that the default InputDecorator provides a
// "small concession to backwards compatibility" by not padding on
// the left and right. If filled is true or an outline border is
// provided then the horizontal padding is included.
await tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: false, // Label appears inline, on top of the input field.
inputDecorationTheme: InputDecorationTheme(
labelStyle: labelStyle,
// filled: false (default) - don't pad by left/right 12dps
),
decoration: const InputDecoration(
label: Text.rich(
TextSpan(text: 'label'),
),
),
),
);
// Overall height for this InputDecorator is 56dps:
// 12 - top padding
// 12 - floating label (ahem font size 16dps * 0.75 = 12)
// 4 - floating label / input text gap
// 16 - input text (ahem font size 16dps)
// 12 - bottom padding
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
expect(tester.getBottomLeft(find.text('label')).dy, 36.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 1.0);
// Verify that the styles were passed along
expect(getLabelStyle(tester).color, labelStyle.color);
});
}
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

HIAST - GitLab