Add button icon support for animation duration (#162667)
Fixes [Default foreground color animation duration doesn't apply on icon of `Button` widgets](https://github.com/flutter/flutter/issues/162301) Fixes [Implement similar widget to``AnimatedDefaultTextStyle`` but for child ``Icon``](https://github.com/flutter/flutter/issues/137251) ### Description This PR adds``AnimatedTheme` to `ButtonStyleButton` which is extended by buttons. It animates the button icon when changing icon color and size, similar to button text. ### Code Sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: HomePage(), ); } } class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, spacing: 20, children: <Widget>[ ElevatedButton.icon( icon: const Icon(Icons.favorite_rounded, size: 50), label: const Text('Button', style: TextStyle(fontSize: 36)), onPressed: () {}, style: const ButtonStyle( iconColor: WidgetStateProperty<Color>.fromMap( <WidgetStatesConstraint, Color>{ WidgetState.pressed: Color(0XFFFF0000), WidgetState.any: Color(0XFF000000), }, ), foregroundColor: WidgetStateProperty<Color>.fromMap( <WidgetStatesConstraint, Color>{ WidgetState.pressed: Color(0XFFFF0000), WidgetState.any: Color(0XFF000000), }, ), ), ), ElevatedButton.icon( icon: const Icon(Icons.favorite_rounded, size: 50), label: const Text('Button', style: TextStyle(fontSize: 36)), onPressed: () {}, style: const ButtonStyle( animationDuration: Duration(seconds: 2), iconColor: WidgetStateProperty<Color>.fromMap( <WidgetStatesConstraint, Color>{ WidgetState.pressed: Color(0XFFFF0000), WidgetState.any: Color(0XFF000000), }, ), foregroundColor: WidgetStateProperty<Color>.fromMap( <WidgetStatesConstraint, Color>{ WidgetState.pressed: Color(0XFFFF0000), WidgetState.any: Color(0XFF000000), }, ), ), ) ], ), ), ); } } ``` </details> ### Before https://github.com/user-attachments/assets/86fcab94-1147-4c49-b362-12f804a5d540 ### After https://github.com/user-attachments/assets/12a49de8-06d6-46c5-976f-5ce182d60423 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md Co-authored-by:Qun Cheng <36861262+QuncCccccc@users.noreply.github.com>
Showing
- packages/flutter/lib/src/material/button_style_button.dart 23 additions, 17 deletionspackages/flutter/lib/src/material/button_style_button.dart
- packages/flutter/test/material/app_bar_theme_test.dart 2 additions, 0 deletionspackages/flutter/test/material/app_bar_theme_test.dart
- packages/flutter/test/material/elevated_button_test.dart 87 additions, 10 deletionspackages/flutter/test/material/elevated_button_test.dart
- packages/flutter/test/material/filled_button_test.dart 85 additions, 10 deletionspackages/flutter/test/material/filled_button_test.dart
- packages/flutter/test/material/icon_button_test.dart 9 additions, 0 deletionspackages/flutter/test/material/icon_button_test.dart
- packages/flutter/test/material/input_decorator_test.dart 2 additions, 2 deletionspackages/flutter/test/material/input_decorator_test.dart
- packages/flutter/test/material/outlined_button_test.dart 87 additions, 10 deletionspackages/flutter/test/material/outlined_button_test.dart
- packages/flutter/test/material/segmented_button_test.dart 1 addition, 0 deletionspackages/flutter/test/material/segmented_button_test.dart
- packages/flutter/test/material/text_button_test.dart 86 additions, 9 deletionspackages/flutter/test/material/text_button_test.dart
- packages/flutter/test/material/toggle_buttons_test.dart 6 additions, 8 deletionspackages/flutter/test/material/toggle_buttons_test.dart
- packages/flutter/test/material/toggle_buttons_theme_test.dart 14 additions, 16 deletions...ages/flutter/test/material/toggle_buttons_theme_test.dart
Please register or sign in to comment