Unverified Commit f704b0d7 authored by Markus Aksli's avatar Markus Aksli Committed by GitHub

Add InputDecorator label color on error examples (#93480)

parent d75af1c0
// 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,
);
}
}
// 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,
);
}
}
// 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);
});
}
// 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);
});
}
...@@ -2598,28 +2598,65 @@ class InputDecoration { ...@@ -2598,28 +2598,65 @@ class InputDecoration {
/// Only one of [label] and [labelText] can be specified. /// Only one of [label] and [labelText] can be specified.
final String? labelText; final String? labelText;
/// The style to use for the [labelText] when the label is on top of the /// {@template flutter.material.inputDecoration.labelStyle}
/// input field. /// 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 /// If [labelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e. /// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not. /// if the [TextField] is focused or not.
/// ///
/// When the [labelText] is above (i.e., vertically adjacent to) the input /// When the [InputDecoration.labelText] is above (i.e., vertically adjacent to)
/// field, the text uses the [floatingLabelStyle] instead. /// the input field, the text uses the [floatingLabelStyle] instead.
/// ///
/// If null, defaults to a value derived from the base [TextStyle] for the /// If null, defaults to a value derived from the base [TextStyle] for the
/// input field and the current [Theme]. /// 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; final TextStyle? labelStyle;
/// The style to use for the [labelText] when the label is above (i.e., /// {@template flutter.material.inputDecoration.floatingLabelStyle}
/// vertically adjacent to) the input field. /// 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 /// If [floatingLabelStyle] is a [MaterialStateTextStyle], then the effective
/// text style can depend on the [MaterialState.focused] state, i.e. /// text style can depend on the [MaterialState.focused] state, i.e.
/// if the [TextField] is focused or not. /// if the [TextField] is focused or not.
/// ///
/// If null, defaults to [labelStyle]. /// 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; final TextStyle? floatingLabelStyle;
/// Text that provides context about the [InputDecorator.child]'s value, such /// Text that provides context about the [InputDecorator.child]'s value, such
...@@ -2696,10 +2733,18 @@ class InputDecoration { ...@@ -2696,10 +2733,18 @@ class InputDecoration {
/// [TextFormField.validator], if that is not null. /// [TextFormField.validator], if that is not null.
final String? errorText; 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 /// If null, defaults of a value derived from the base [TextStyle] for the
/// input field and the current [Theme]. /// 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; final TextStyle? errorStyle;
...@@ -3680,31 +3725,10 @@ class InputDecorationTheme with Diagnosticable { ...@@ -3680,31 +3725,10 @@ class InputDecorationTheme with Diagnosticable {
assert(filled != null), assert(filled != null),
assert(alignLabelWithHint != null); assert(alignLabelWithHint != null);
/// The style to use for [InputDecoration.labelText] when the label is on top /// {@macro flutter.material.inputDecoration.labelStyle}
/// 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].
final TextStyle? labelStyle; final TextStyle? labelStyle;
/// The style to use for [InputDecoration.labelText] when the label is /// {@macro flutter.material.inputDecoration.floatingLabelStyle}
/// 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].
final TextStyle? floatingLabelStyle; final TextStyle? floatingLabelStyle;
/// The style to use for [InputDecoration.helperText]. /// The style to use for [InputDecoration.helperText].
...@@ -3742,10 +3766,7 @@ class InputDecorationTheme with Diagnosticable { ...@@ -3742,10 +3766,7 @@ class InputDecorationTheme with Diagnosticable {
/// input field and the current [Theme]. /// input field and the current [Theme].
final TextStyle? hintStyle; final TextStyle? hintStyle;
/// The style to use for the [InputDecoration.errorText]. /// {@macro flutter.material.inputDecoration.errorStyle}
///
/// If null, defaults of a value derived from the base [TextStyle] for the
/// input field and the current [Theme].
final TextStyle? errorStyle; final TextStyle? errorStyle;
/// The maximum number of lines the [InputDecoration.errorText] can occupy. /// The maximum number of lines the [InputDecoration.errorText] can occupy.
......
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