Updated the TextButton image button example artwork (#144583)

Updated the "smiley" TextButton example with new images from Nancy Hu @google.  I also made the example a little more complicated, per the new artwork: now it displays a different image while the button's action pretends to run for a second.

https://github.com/flutter/flutter/assets/1377460/b631a484-4b4f-4e01-ad52-a877fb46ef72
This commit is contained in:
Hans Muller 2024-03-04 19:01:40 -08:00 committed by GitHub
parent 111a5e7ad2
commit e73e7e2e56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 54 additions and 13 deletions

View file

@ -55,10 +55,27 @@ class _TextButtonExampleState extends State<TextButtonExample> {
TextDirection textDirection = TextDirection.ltr;
ThemeMode themeMode = ThemeMode.light;
late final ScrollController scrollController;
bool isRunning = false;
static const Widget verticalSpacer = SizedBox(height: 16);
static const Widget horizontalSpacer = SizedBox(width: 32);
static const ImageProvider grassImage = NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_grass.jpeg',
);
static const ImageProvider defaultImage = NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_nhu_default.png',
);
static const ImageProvider hoveredImage = NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_nhu_hovered.png',
);
static const ImageProvider pressedImage = NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_nhu_pressed.png',
);
static const ImageProvider runningImage = NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_nhu_end.png',
);
@override
void initState() {
scrollController = ScrollController();
@ -302,7 +319,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
return Ink(
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(grassUrl),
image: grassImage,
fit: BoxFit.cover,
),
),
@ -315,7 +332,8 @@ class _TextButtonExampleState extends State<TextButtonExample> {
verticalSpacer,
// Override the foregroundBuilder to specify images for the button's pressed
// hovered and inactive states.
// hovered and default states. We switch to an additional image while the
// button's callback is "running".
//
// This is an example of completely changing the default appearance of a button
// by specifying images for each state and by turning off the overlays by
@ -326,13 +344,25 @@ class _TextButtonExampleState extends State<TextButtonExample> {
// TextButton's child parameter is required, so we still have
// to provide one.
TextButton(
onPressed: () {},
onPressed: () async {
setState(() { isRunning = true; });
Future<void>.delayed(const Duration(seconds: 1), () {
// Simulate a time consuming action.
setState(() { isRunning = false; });
});
},
style: TextButton.styleFrom(
overlayColor: Colors.transparent,
foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
String url = states.contains(MaterialState.hovered) ? smiley3Url : smiley1Url;
if (states.contains(MaterialState.pressed)) {
url = smiley2Url;
late final ImageProvider image;
if (isRunning) {
image = runningImage;
} else if (states.contains(MaterialState.pressed)) {
image = pressedImage;
} else if (states.contains(MaterialState.hovered)) {
image = hoveredImage;
} else {
image = defaultImage;
}
return AnimatedContainer(
width: 64,
@ -341,7 +371,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
curve: Curves.fastOutSlowIn,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(url),
image: image,
fit: BoxFit.contain,
),
),
@ -459,8 +489,3 @@ class TextButtonExampleSwitches extends StatelessWidget {
);
}
}
const String grassUrl = 'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_grass.jpeg';
const String smiley1Url = 'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_smiley1.png';
const String smiley2Url = 'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_smiley2.png';
const String smiley3Url = 'https://flutter.github.io/assets-for-api-docs/assets/material/text_button_smiley3.png';

View file

@ -54,9 +54,25 @@ void main() {
await tester.tap(find.widgetWithText(TextButton, 'TextButton #8'));
await tester.pumpAndSettle();
await tester.tap(find.byType(TextButton).last); // Smiley image button
final Finder smileyButton = find.byType(TextButton).last;
await tester.tap(smileyButton); // Smiley image button
await tester.pumpAndSettle();
String smileyButtonImageUrl() {
final AnimatedContainer container = tester.widget<AnimatedContainer>(
find.descendant(of: smileyButton, matching: find.byType(AnimatedContainer)),
);
final BoxDecoration decoration = container.decoration! as BoxDecoration;
final NetworkImage image = decoration.image!.image as NetworkImage;
return image.url;
}
// The smiley button's onPressed method changes the button image
// for one second to simulate a long action running. The button's
// image changes while the action is running.
expect(smileyButtonImageUrl().endsWith('text_button_nhu_end.png'), isTrue);
await tester.pump(const Duration(seconds: 1));
expect(smileyButtonImageUrl().endsWith('text_button_nhu_default.png'), isTrue);
await tester.tap(find.byType(Switch).at(0)); // Dark Mode Switch
await tester.pumpAndSettle();