Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
f704b0d7
Unverified
Commit
f704b0d7
authored
Dec 09, 2021
by
Markus Aksli
Committed by
GitHub
Dec 09, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add InputDecorator label color on error examples (#93480)
parent
d75af1c0
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
212 additions
and
34 deletions
+212
-34
input_decoration.floating_label_style_error.0.dart
...orator/input_decoration.floating_label_style_error.0.dart
+58
-0
input_decoration.label_style_error.0.dart
...input_decorator/input_decoration.label_style_error.0.dart
+58
-0
input_decoration.floating_label_style_error.0.test.dart
...r/input_decoration.floating_label_style_error.0.test.dart
+22
-0
input_decoration.label_style_error.0.test.dart
..._decorator/input_decoration.label_style_error.0.test.dart
+19
-0
input_decorator.dart
packages/flutter/lib/src/material/input_decorator.dart
+55
-34
No files found.
examples/api/lib/material/input_decorator/input_decoration.floating_label_style_error.0.dart
0 → 100644
View file @
f704b0d7
// 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
,
);
}
}
examples/api/lib/material/input_decorator/input_decoration.label_style_error.0.dart
0 → 100644
View file @
f704b0d7
// 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
,
);
}
}
examples/api/test/material/input_decorator/input_decoration.floating_label_style_error.0.test.dart
0 → 100644
View file @
f704b0d7
// 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
);
});
}
examples/api/test/material/input_decorator/input_decoration.label_style_error.0.test.dart
0 → 100644
View file @
f704b0d7
// 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
);
});
}
packages/flutter/lib/src/material/input_decorator.dart
View file @
f704b0d7
...
@@ -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.
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment