DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add InputDecorator label color on error examples (#93480)

Browse Source
This commit is contained in:
Markus Aksli 2021-12-09 03:24:08 +02:00 committed by GitHub
parent d75af1c024
commit f704b0d708
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 212 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
examples/api/lib/material/input_decorator/input_decoration.floating_label_style_error.0.dart Normal file
View File

@ -0,0 +1,58 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for InputDecorator
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: InputDecoratorExample(),
),
),
);
}
}
class InputDecoratorExample extends StatelessWidget {
const InputDecoratorExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Name',
// The MaterialStateProperty's value is a text style that is orange
// by default, but the theme's error color if the input decorator
// is in its error state.
floatingLabelStyle: MaterialStateTextStyle.resolveWith(
(Set<MaterialState> states) {
final Color color = states.contains(MaterialState.error) ? Theme.of(context).errorColor: Colors.orange;
return TextStyle(color: color, letterSpacing: 1.3);
}
),
),
validator: (String? value) {
if (value == null || value == '') {
return 'Enter name';
}
return null;
},
autovalidateMode: AutovalidateMode.always,
);
}
}

58
examples/api/lib/material/input_decorator/input_decoration.label_style_error.0.dart Normal file
View File

@ -0,0 +1,58 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for InputDecorator
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: InputDecoratorExample(),
),
),
);
}
}
class InputDecoratorExample extends StatelessWidget {
const InputDecoratorExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Name',
// The MaterialStateProperty's value is a text style that is orange
// by default, but the theme's error color if the input decorator
// is in its error state.
labelStyle: MaterialStateTextStyle.resolveWith(
(Set<MaterialState> states) {
final Color color = states.contains(MaterialState.error) ? Theme.of(context).errorColor: Colors.orange;
return TextStyle(color: color, letterSpacing: 1.3);
}
),
),
validator: (String? value) {
if (value == null || value == '') {
return 'Enter name';
}
return null;
},
autovalidateMode: AutovalidateMode.always,
);
}
}

22
examples/api/test/material/input_decorator/input_decoration.floating_label_style_error.0.test.dart Normal file
View File

@ -0,0 +1,22 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/input_decorator/input_decoration.floating_label_style_error.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('InputDecorator label uses errorColor', (WidgetTester tester) async {
await tester.pumpWidget(
const example.MyApp(),
);
final Theme theme = tester.firstWidget(find.byType(Theme));
await tester.tap(find.byType(TextFormField));
await tester.pumpAndSettle();
final AnimatedDefaultTextStyle label = tester.firstWidget(find.ancestor(of: find.text('Name'), matching: find.byType(AnimatedDefaultTextStyle)));
expect(label.style.color, theme.data.errorColor);
});
}

19
examples/api/test/material/input_decorator/input_decoration.label_style_error.0.test.dart Normal file
View File

@ -0,0 +1,19 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter_api_samples/material/input_decorator/input_decoration.label_style_error.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('InputDecorator label uses errorColor', (WidgetTester tester) async {
await tester.pumpWidget(
const example.MyApp(),
);
final Theme theme = tester.firstWidget(find.byType(Theme));
final AnimatedDefaultTextStyle label = tester.firstWidget(find.ancestor(of: find.text('Name'), matching: find.byType(AnimatedDefaultTextStyle)));
expect(label.style.color, theme.data.errorColor);
});
}

89
packages/flutter/lib/src/material/input_decorator.dart
View File

@ -2598,28 +2598,65 @@ class InputDecoration {
/// 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
/// input field.
/// {@template flutter.material.inputDecoration.labelStyle}
/// The style to use for [InputDecoration.labelText] when the label is on top
/// of the input field.
///
/// If [labelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not.
///
/// When the [labelText] is above (i.e., vertically adjacent to) the input
/// field, the text uses the [floatingLabelStyle] instead.
/// When the [InputDecoration.labelText] is above (i.e., vertically adjacent to)
/// the input field, the text uses the [floatingLabelStyle] instead.
///
/// If null, defaults to a value derived from the base [TextStyle] for the
/// input field and the current [Theme].
///
/// Note that if you specify this style it will override the default behavior
/// of [InputDecoration] that changes the color of the label to the
/// [InputDecoration.errorStyle] color or [ThemeData.errorColor].
///
/// {@tool dartpad}
/// It's possible to override the label style for just the error state, or
/// just the default state, or both.
///
/// In this example the [labelStyle] is specified with a [MaterialStateProperty]
/// which resolves to a text style whose color depends on the decorator's
/// error state.
///
/// ** See code in examples/api/lib/material/input_decorator/input_decoration.label_style_error.0.dart **
/// {@end-tool}
/// {@endtemplate}
final TextStyle? labelStyle;
/// The style to use for the [labelText] when the label is above (i.e.,
/// vertically adjacent to) the input field.
/// {@template flutter.material.inputDecoration.floatingLabelStyle}
/// The style to use for [InputDecoration.labelText] when the label is
/// above (i.e., vertically adjacent to) the input field.
///
/// When the [InputDecoration.labelText] is on top of the input field, the
/// text uses the [labelStyle] instead.
///
/// If [floatingLabelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not.
///
/// If null, defaults to [labelStyle].
///
/// Note that if you specify this style it will override the default behavior
/// of [InputDecoration] that changes the color of the label to the
/// [InputDecoration.errorStyle] color or [ThemeData.errorColor].
///
/// {@tool dartpad}
/// It's possible to override the label style for just the error state, or
/// just the default state, or both.
///
/// In this example the [floatingLabelStyle] is specified with a
/// [MaterialStateProperty] which resolves to a text style whose color depends
/// on the decorator's error state.
///
/// ** See code in examples/api/lib/material/input_decorator/input_decoration.floating_label_style_error.0.dart **
/// {@end-tool}
/// {@endtemplate}
final TextStyle? floatingLabelStyle;
/// Text that provides context about the [InputDecorator.child]'s value, such
@ -2696,10 +2733,18 @@ class InputDecoration {
/// [TextFormField.validator], if that is not null.
final String? errorText;
/// The style to use for the [errorText].
/// {@template flutter.material.inputDecoration.errorStyle}
/// The style to use for the [InputDecoration.errorText].
///
/// If null, defaults of a value derived from the base [TextStyle] for the
/// input field and the current [Theme].
///
/// By default the color of style will be used by the label of
/// [InputDecoration] if [InputDecoration.errorText] is not null. See
/// [InputDecoration.labelStyle] or [InputDecoration.floatingLabelStyle] for
/// an example of how to replicate this behavior if you have specified either
/// style.
/// {@endtemplate}
final TextStyle? errorStyle;
@ -3680,31 +3725,10 @@ class InputDecorationTheme with Diagnosticable {
assert(filled != null),
assert(alignLabelWithHint != null);
/// The style to use for [InputDecoration.labelText] when the label is on top
/// of the input field.
///
/// When the [InputDecoration.labelText] is floating above the input field,
/// the text uses the [floatingLabelStyle] instead.
///
/// If [labelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not.
///
/// If null, defaults to a value derived from the base [TextStyle] for the
/// input field and the current [Theme].
/// {@macro flutter.material.inputDecoration.labelStyle}
final TextStyle? labelStyle;
/// The style to use for [InputDecoration.labelText] when the label is
/// above (i.e., vertically adjacent to) the input field.
///
/// When the [InputDecoration.labelText] is on top of the input field, the
/// text uses the [labelStyle] instead.
///
/// If [floatingLabelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not.
///
/// If null, defaults to [labelStyle].
/// {@macro flutter.material.inputDecoration.floatingLabelStyle}
final TextStyle? floatingLabelStyle;
/// The style to use for [InputDecoration.helperText].
@ -3742,10 +3766,7 @@ class InputDecorationTheme with Diagnosticable {
/// input field and the current [Theme].
final TextStyle? hintStyle;
/// The style to use for the [InputDecoration.errorText].
///
/// If null, defaults of a value derived from the base [TextStyle] for the
/// input field and the current [Theme].
/// {@macro flutter.material.inputDecoration.errorStyle}
final TextStyle? errorStyle;
/// The maximum number of lines the [InputDecoration.errorText] can occupy.