Taha Tesser
60d0bfcca4
Fix buttons with icons ignore provided foregroundColor ( #162880 )
...
Fixes [Flutter 3.27 and later breaks past styling and theming of icon
color on buttons with
icons](https://github.com/flutter/flutter/issues/162839 )
### Description
This PR fixes how the icon color is resolved in `ButtonStyleButton`.
This was regressed in https://github.com/flutter/flutter/pull/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
2025-02-13 08:33:12 +00:00
Taha Tesser
9e2d9deb28
Add IconAlignment to ButtonStyle and styleFrom methods ( #158503 )
...
Fixes [Proposal to add iconAlignment to
ButtonStyle](https://github.com/flutter/flutter/issues/153350 )
### Description
This PR refactors buttons `IconAlignment`, adds to `ButtonStyle` and
`styleFrom` methods. Which makes it possible to customize iconAlignment
same way as icon size and color in the `ButtonStyle`.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
enum StyleSegment {
none,
widgetButtonStyle,
widgetStyleFrom,
themeButtonStyle,
themeStyleFrom
}
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
StyleSegment _selectedSegment = StyleSegment.none;
ThemeData? getThemeStyle() => switch (_selectedSegment) {
StyleSegment.themeButtonStyle => ThemeData(
textButtonTheme: const TextButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
elevatedButtonTheme: const ElevatedButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
outlinedButtonTheme: const OutlinedButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
filledButtonTheme: const FilledButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
),
StyleSegment.themeStyleFrom => ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
iconAlignment: IconAlignment.end,
),
),
elevatedButtonTheme: const ElevatedButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
outlinedButtonTheme: const OutlinedButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
filledButtonTheme: const FilledButtonThemeData(
style: ButtonStyle(
iconAlignment: IconAlignment.end,
),
),
),
_ => null
};
ButtonStyle? getTextButtonStyle() => switch (_selectedSegment) {
StyleSegment.widgetStyleFrom => TextButton.styleFrom(
iconAlignment: IconAlignment.end,
),
StyleSegment.widgetButtonStyle => const ButtonStyle(
iconAlignment: IconAlignment.end,
),
_ => null
};
ButtonStyle? getElevatedButtonStyle() => switch (_selectedSegment) {
StyleSegment.widgetStyleFrom => ElevatedButton.styleFrom(
iconAlignment: IconAlignment.end,
),
StyleSegment.widgetButtonStyle => const ButtonStyle(
iconAlignment: IconAlignment.end,
),
_ => null
};
ButtonStyle? getOutlinedButtonStyle() => switch (_selectedSegment) {
StyleSegment.widgetStyleFrom => OutlinedButton.styleFrom(
iconAlignment: IconAlignment.end,
),
StyleSegment.widgetButtonStyle => const ButtonStyle(
iconAlignment: IconAlignment.end,
),
_ => null
};
ButtonStyle? getFilledButtonStyle() => switch (_selectedSegment) {
StyleSegment.widgetStyleFrom => FilledButton.styleFrom(
iconAlignment: IconAlignment.end,
),
StyleSegment.widgetButtonStyle => const ButtonStyle(
iconAlignment: IconAlignment.end,
),
_ => null
};
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: getThemeStyle(),
home: Scaffold(
appBar: AppBar(
title: const Text('ButtonStyle Icon Alignment'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 20,
children: [
Wrap(
spacing: 16,
runSpacing: 16,
children: [
TextButton.icon(
style: getTextButtonStyle(),
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Text Button'),
),
ElevatedButton.icon(
style: getElevatedButtonStyle(),
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Elevated Button'),
),
OutlinedButton.icon(
style: getOutlinedButtonStyle(),
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Outlined Button'),
),
FilledButton.icon(
style: getFilledButtonStyle(),
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Filled Button'),
),
FilledButton.tonalIcon(
style: getFilledButtonStyle(),
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Filled Button Tonal Icon'),
),
],
),
StyleSelection(
selectedSegment: _selectedSegment,
onSegmentSelected: (StyleSegment segment) {
setState(() {
_selectedSegment = segment;
});
},
),
],
),
),
),
),
);
}
}
class StyleSelection extends StatelessWidget {
const StyleSelection(
{super.key,
this.selectedSegment = StyleSegment.none,
required this.onSegmentSelected});
final ValueChanged<StyleSegment> onSegmentSelected;
final StyleSegment selectedSegment;
@override
Widget build(BuildContext context) {
return SegmentedButton<StyleSegment>(
segments: const <ButtonSegment<StyleSegment>>[
ButtonSegment<StyleSegment>(
value: StyleSegment.none,
label: Text('None'),
),
ButtonSegment<StyleSegment>(
value: StyleSegment.widgetButtonStyle,
label: Text('Widget Button Style'),
),
ButtonSegment<StyleSegment>(
value: StyleSegment.widgetStyleFrom,
label: Text('Widget Style From'),
),
ButtonSegment<StyleSegment>(
value: StyleSegment.themeButtonStyle,
label: Text('Theme Button Style'),
),
ButtonSegment<StyleSegment>(
value: StyleSegment.themeStyleFrom,
label: Text('Theme Style From'),
),
],
selected: <StyleSegment>{selectedSegment},
onSelectionChanged: (Set<StyleSegment> newSelection) {
onSegmentSelected(newSelection.first);
},
);
}
}
```
</details>
### Preview
<img width="1175" alt="Screenshot 2024-11-12 at 12 10 43"
src="https://github.com/user-attachments/assets/a28207c5-0ef7-41fa-a45c-e9401df897a0 ">
## 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
2024-12-03 21:19:12 +00:00
