Unverified Commit e73e7e2e authored by Hans Muller's avatar Hans Muller Committed by GitHub

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
parent 111a5e7a
...@@ -55,10 +55,27 @@ class _TextButtonExampleState extends State<TextButtonExample> { ...@@ -55,10 +55,27 @@ class _TextButtonExampleState extends State<TextButtonExample> {
TextDirection textDirection = TextDirection.ltr; TextDirection textDirection = TextDirection.ltr;
ThemeMode themeMode = ThemeMode.light; ThemeMode themeMode = ThemeMode.light;
late final ScrollController scrollController; late final ScrollController scrollController;
bool isRunning = false;
static const Widget verticalSpacer = SizedBox(height: 16); static const Widget verticalSpacer = SizedBox(height: 16);
static const Widget horizontalSpacer = SizedBox(width: 32); 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 @override
void initState() { void initState() {
scrollController = ScrollController(); scrollController = ScrollController();
...@@ -302,7 +319,7 @@ class _TextButtonExampleState extends State<TextButtonExample> { ...@@ -302,7 +319,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
return Ink( return Ink(
decoration: const BoxDecoration( decoration: const BoxDecoration(
image: DecorationImage( image: DecorationImage(
image: NetworkImage(grassUrl), image: grassImage,
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
), ),
...@@ -315,7 +332,8 @@ class _TextButtonExampleState extends State<TextButtonExample> { ...@@ -315,7 +332,8 @@ class _TextButtonExampleState extends State<TextButtonExample> {
verticalSpacer, verticalSpacer,
// Override the foregroundBuilder to specify images for the button's pressed // 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 // 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 // by specifying images for each state and by turning off the overlays by
...@@ -326,13 +344,25 @@ class _TextButtonExampleState extends State<TextButtonExample> { ...@@ -326,13 +344,25 @@ class _TextButtonExampleState extends State<TextButtonExample> {
// TextButton's child parameter is required, so we still have // TextButton's child parameter is required, so we still have
// to provide one. // to provide one.
TextButton( 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( style: TextButton.styleFrom(
overlayColor: Colors.transparent, overlayColor: Colors.transparent,
foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) { foregroundBuilder: (BuildContext context, Set<MaterialState> states, Widget? child) {
String url = states.contains(MaterialState.hovered) ? smiley3Url : smiley1Url; late final ImageProvider image;
if (states.contains(MaterialState.pressed)) { if (isRunning) {
url = smiley2Url; image = runningImage;
} else if (states.contains(MaterialState.pressed)) {
image = pressedImage;
} else if (states.contains(MaterialState.hovered)) {
image = hoveredImage;
} else {
image = defaultImage;
} }
return AnimatedContainer( return AnimatedContainer(
width: 64, width: 64,
...@@ -341,7 +371,7 @@ class _TextButtonExampleState extends State<TextButtonExample> { ...@@ -341,7 +371,7 @@ class _TextButtonExampleState extends State<TextButtonExample> {
curve: Curves.fastOutSlowIn, curve: Curves.fastOutSlowIn,
decoration: BoxDecoration( decoration: BoxDecoration(
image: DecorationImage( image: DecorationImage(
image: NetworkImage(url), image: image,
fit: BoxFit.contain, fit: BoxFit.contain,
), ),
), ),
...@@ -459,8 +489,3 @@ class TextButtonExampleSwitches extends StatelessWidget { ...@@ -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';
...@@ -54,9 +54,25 @@ void main() { ...@@ -54,9 +54,25 @@ void main() {
await tester.tap(find.widgetWithText(TextButton, 'TextButton #8')); await tester.tap(find.widgetWithText(TextButton, 'TextButton #8'));
await tester.pumpAndSettle(); 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(); 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.tap(find.byType(Switch).at(0)); // Dark Mode Switch
await tester.pumpAndSettle(); await tester.pumpAndSettle();
......
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