[CP-stable]Fix buttons with icons ignore provided foregroundColor#163201
Merged
auto-submit[bot] merged 1 commit intoflutter:flutter-3.29-candidate.0from Feb 20, 2025
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="proxy.php?url=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="proxy.php?url=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
Author
|
@TahaTesser please fill out the PR description above, afterwards the release team will review this request. |
TahaTesser
reviewed
Feb 13, 2025
| // Fallback to foregroundColor if iconColor is null. | ||
| defaultStyle.foregroundColor?.resolve(statesController.value); | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
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.
justinmc
approved these changes
Feb 18, 2025
Contributor
There was a problem hiding this comment.
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
159 checks passed
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 6, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Mar 7, 2025
9 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.