Skip to content

Commit 96ba3c5

Browse files
authored
Add WidgetStateProperty example and tests for it. (flutter#155315)
This PR contributes to flutter#155313 ### Description - Adds example for `WidgetStateProperty` - Adds tests for `examples/api/lib/widgets/widget_state/widget_state_property.0.dart`
1 parent 1ed8a0a commit 96ba3c5

File tree

3 files changed

+132
-0
lines changed

3 files changed

+132
-0
lines changed
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
7+
/// Flutter code sample for [WidgetStateProperty].
8+
9+
void main() {
10+
runApp(const WidgetStatePropertyExampleApp());
11+
}
12+
13+
class WidgetStatePropertyExampleApp extends StatelessWidget {
14+
const WidgetStatePropertyExampleApp({super.key});
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return MaterialApp(
19+
home: Scaffold(
20+
appBar: AppBar(title: const Text('WidgetStateProperty Sample')),
21+
body: const Center(
22+
child: WidgetStatePropertyExample(),
23+
),
24+
),
25+
);
26+
}
27+
}
28+
29+
class WidgetStatePropertyExample extends StatelessWidget {
30+
const WidgetStatePropertyExample({super.key});
31+
32+
@override
33+
Widget build(BuildContext context) {
34+
return TextButton(
35+
style: ButtonStyle(
36+
foregroundColor: WidgetStateProperty<Color>.fromMap(
37+
<WidgetStatesConstraint, Color>{
38+
WidgetState.focused: Colors.blueAccent,
39+
WidgetState.pressed | WidgetState.hovered: Colors.blue,
40+
WidgetState.any: Colors.red,
41+
},
42+
),
43+
),
44+
onPressed: () {},
45+
child: const Text('TextButton'),
46+
);
47+
}
48+
}
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'dart:ui';
6+
7+
import 'package:flutter/material.dart';
8+
import 'package:flutter_api_samples/widgets/widget_state/widget_state_property.0.dart'
9+
as example;
10+
import 'package:flutter_test/flutter_test.dart';
11+
12+
void main() {
13+
Color? getTextColor(WidgetTester tester) {
14+
final BuildContext context = tester.element(find.text('TextButton'));
15+
final TextStyle textStyle = DefaultTextStyle.of(context).style;
16+
17+
return textStyle.color;
18+
}
19+
20+
testWidgets('Displays red colored text by default', (WidgetTester tester) async {
21+
await tester.pumpWidget(
22+
const example.WidgetStatePropertyExampleApp(),
23+
);
24+
25+
expect(getTextColor(tester), Colors.red);
26+
});
27+
28+
testWidgets('Displays blue colored text when button is hovered', (WidgetTester tester) async {
29+
await tester.pumpWidget(
30+
const example.WidgetStatePropertyExampleApp(),
31+
);
32+
33+
expect(getTextColor(tester), Colors.red);
34+
35+
// Hover over the TextButton.
36+
final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
37+
await gesture.moveTo(tester.getCenter(find.byType(TextButton)));
38+
39+
await tester.pumpAndSettle();
40+
41+
expect(getTextColor(tester), Colors.blue);
42+
});
43+
44+
testWidgets('Displays blue colored text when button is pressed', (WidgetTester tester) async {
45+
await tester.pumpWidget(
46+
const example.WidgetStatePropertyExampleApp(),
47+
);
48+
49+
expect(getTextColor(tester), Colors.red);
50+
51+
// Press on the TextButton.
52+
final TestGesture gesture = await tester.createGesture();
53+
await gesture.down(tester.getCenter(find.byType(TextButton)));
54+
55+
await tester.pumpAndSettle();
56+
57+
expect(getTextColor(tester), Colors.blue);
58+
});
59+
60+
testWidgets('Displays blue colored text when button is focused', (WidgetTester tester) async {
61+
await tester.pumpWidget(
62+
const example.WidgetStatePropertyExampleApp(),
63+
);
64+
65+
expect(getTextColor(tester), Colors.red);
66+
67+
// Focus on the TextButton.
68+
FocusScope.of(tester.element(find.byType(TextButton))).nextFocus();
69+
70+
await tester.pumpAndSettle();
71+
72+
expect(getTextColor(tester), Colors.blueAccent);
73+
});
74+
}

packages/flutter/lib/src/widgets/widget_state.dart

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -765,6 +765,16 @@ class _WidgetTextStyleMapper extends WidgetStateTextStyle {
765765
/// of their current material state and [resolve] the button style's
766766
/// material state properties when their value is needed.
767767
///
768+
/// {@tool dartpad}
769+
/// This example shows how the default text and icon color
770+
/// (the "foreground color") of a [TextButton] can be overridden with a
771+
/// [WidgetStateProperty]. In this example, the button's text color will be
772+
/// `Colors.blue` when the button is being pressed, hovered, or focused.
773+
/// Otherwise, the text color will be `Colors.red`.
774+
///
775+
/// ** See code in examples/api/lib/widgets/widget_state/widget_state_property.0.dart **
776+
/// {@end-tool}
777+
///
768778
/// See also:
769779
///
770780
/// * [MaterialStateProperty], the Material specific version of

0 commit comments

Comments
 (0)