-
Notifications
You must be signed in to change notification settings - Fork 29.7k
[CP-stable]Fix buttons with icons ignore provided foregroundColor
#163201
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[CP-stable]Fix buttons with icons ignore provided foregroundColor
#163201
Conversation
) Fixes [Flutter 3.27 and later breaks past styling and theming of icon color on buttons with icons](flutter#162839) ### Description This PR fixes how the icon color is resolved in `ButtonStyleButton`. This was regressed in flutter#143501. ### Code Sample (taken from issue) <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); final ButtonStyle filledButtonStyle = FilledButton.styleFrom( foregroundColor: Colors.red, backgroundColor: Colors.grey, ); final ButtonStyle elevatedButtonStyle = ElevatedButton.styleFrom( foregroundColor: Colors.orange.shade600, backgroundColor: Colors.blueGrey, ); final ButtonStyle outlinedButtonStyle = OutlinedButton.styleFrom( foregroundColor: Colors.lightBlue, ); final ButtonStyle textButtonStyle = TextButton.styleFrom( foregroundColor: Colors.green, ); final ButtonStyle segmentedButtonStyle = SegmentedButton.styleFrom( selectedForegroundColor: Colors.tealAccent.shade700, ); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: const HomePage(), theme: ThemeData( filledButtonTheme: FilledButtonThemeData( style: filledButtonStyle, ), elevatedButtonTheme: ElevatedButtonThemeData( style: elevatedButtonStyle, ), outlinedButtonTheme: OutlinedButtonThemeData( style: outlinedButtonStyle, ), textButtonTheme: TextButtonThemeData( style: textButtonStyle, ), segmentedButtonTheme: SegmentedButtonThemeData( style: segmentedButtonStyle, ), ), ); } } class HomePage extends StatelessWidget { const HomePage({super.key}); @OverRide Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Button Icon Color Issue')), body: Center( child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ FilledButton.icon( label: const Text('Filled Themed'), icon: const Icon(Icons.add), onPressed: () {}, ), const SizedBox(width: 8), FilledButton.icon( style: filledButtonStyle.copyWith( foregroundColor: WidgetStateProperty.all(Colors.yellow), ), label: const Text('Filled Styled'), icon: const Icon(Icons.add), onPressed: () {}, ), ], ), const SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton.icon( label: const Text('Elevated Themed'), icon: const Icon(Icons.add), onPressed: () {}, ), const SizedBox(width: 8), ElevatedButton.icon( style: elevatedButtonStyle.copyWith( foregroundColor: WidgetStateProperty.all(Colors.lime), ), label: const Text('Elevated Styled'), icon: const Icon(Icons.add), onPressed: () {}, ), ], ), const SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ OutlinedButton.icon( label: const Text('Outlined Themed'), icon: const Icon(Icons.add), onPressed: () {}, ), const SizedBox(width: 8), OutlinedButton.icon( style: outlinedButtonStyle.copyWith( foregroundColor: WidgetStateProperty.all(Colors.deepOrange), ), label: const Text('Outlined Styled'), icon: const Icon(Icons.add), onPressed: () {}, ), ], ), const SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ TextButton.icon( label: const Text('Text Themed'), icon: const Icon(Icons.add), onPressed: () {}, ), const SizedBox(width: 8), TextButton.icon( style: textButtonStyle.copyWith( foregroundColor: WidgetStateProperty.all(Colors.pink), ), label: const Text('Text Styled'), icon: const Icon(Icons.add), onPressed: () {}, ), ], ), const SizedBox(height: 8), const SegmentedButtonShowcase(), ], ), ), ); } } class SegmentedButtonShowcase extends StatefulWidget { const SegmentedButtonShowcase({this.showOutlinedButton, super.key}); final bool? showOutlinedButton; @OverRide State<SegmentedButtonShowcase> createState() => _SegmentedButtonShowcaseState(); } enum Calendar { day, week, month, year } class _SegmentedButtonShowcaseState extends State<SegmentedButtonShowcase> { Calendar _selected = Calendar.day; @OverRide Widget build(BuildContext context) { return SegmentedButton<Calendar>( segments: const <ButtonSegment<Calendar>>[ ButtonSegment<Calendar>( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), ), ButtonSegment<Calendar>( value: Calendar.week, icon: Icon(Icons.calendar_view_week), label: Text('Week'), ), ButtonSegment<Calendar>( value: Calendar.month, icon: Icon(Icons.calendar_view_month), label: Text('Mont'), ), ButtonSegment<Calendar>( value: Calendar.year, icon: Icon(Icons.calendar_today), label: Text('Year'), ), ], selected: <Calendar>{_selected}, onSelectionChanged: (Set<Calendar> selected) { setState(() { _selected = selected.first; }); }, ); } } ``` </details> ### Before <img width="631" alt="Screenshot 2025-02-07 at 17 45 46" src="https://github.com/user-attachments/assets/d40b1c4b-9952-4e11-8295-8a04bbaa7d74" /> ### After <img width="631" alt="Screenshot 2025-02-07 at 17 45 37" src="https://github.com/user-attachments/assets/d308756e-83f2-42da-bc8d-e958d9f4bec5" /> ## 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. - [x] 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
|
@TahaTesser please fill out the PR description above, afterwards the release team will review this request. |
| // Fallback to foregroundColor if iconColor is null. | ||
| defaultStyle.foregroundColor?.resolve(statesController.value); | ||
| } | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are multiple issues closed due to the regression this PR fixes. @rydmike suggested we should CP. This has low risk changes, mainly these 6 lines updating the how the icon color is resolved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CPLGTM 👍 The changes look very low risk since they only really mess with color. And @rydmike's issue (#162839) got 6 upvotes in just 2 weeks of existence, so this is probably affecting a good amount of users.
FYI @QuncCccccc
9bc7df0
into
flutter:flutter-3.29-candidate.0
This pull request is created by automatic cherry pick workflow
Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request.
Issue Link:
What is the link to the issue this cherry-pick is addressing?
PR: #162880
Issue: #162839
Changelog Description:
Explain this cherry pick in one line that is accessible to most Flutter developers. See best practices for examples
Fixes buttons with icons ignore
foregroundColor.Impact Description:
What is the impact (ex. visual jank on Samsung phones, app crash, cannot ship an iOS app)? Does it impact development (ex. flutter doctor crashes when Android Studio is installed), or the shipping production app (the app crashes on launch)
It impacts how buttons with icons render color when using
foregroundColor.Workaround:
Is there a workaround for this issue?
Provide additional property such as
iconColoralong withforegroundColorto match colors for button label and icon.Risk:
What is the risk level of this cherry-pick?
Test Coverage:
Are you confident that your fix is well-tested by automated tests?
Validation Steps:
What are the steps to validate that this fix works?
Testing and samples.