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 https://dart.googlesource.com/external/github.com/flutter/flutter/+/9e2d9deb287c7f7da42e722bcc50f1e4b2a828c4
diff --git a/DEPS b/DEPS index 6af1d4c..7a1fcbc 100644 --- a/DEPS +++ b/DEPS
@@ -262,7 +262,7 @@ 'engine/src/flutter/third_party/dart': Var('dart_git') + '/sdk' + '@' + 'a635ccf2f5779c2f5ce0937fb6f0e22be808d97e', - 'flutter': Var('flutter_git') + '/mirrors/flutter' + '@' + '8106f2ad1c4ad8e85b4481c7b9438494d61a1a4e', + 'flutter': Var('flutter_git') + '/mirrors/flutter' + '@' + '9e2d9deb287c7f7da42e722bcc50f1e4b2a828c4', 'engine/src/flutter/third_party/depot_tools': Var('chromium_git') + '/chromium/tools/depot_tools.git' + '@' + '580b4ff3f5cd0dcaa2eacda28cefe0f45320e8f7',
diff --git a/commits.json b/commits.json index 1293776..331bd0c 100644 --- a/commits.json +++ b/commits.json
@@ -1,5 +1,5 @@ { "engine/src/flutter":"ba394f5032caf4397308e93cbee00321696faedd", "engine/src/flutter/third_party/dart":"a635ccf2f5779c2f5ce0937fb6f0e22be808d97e", - "flutter":"8106f2ad1c4ad8e85b4481c7b9438494d61a1a4e" + "flutter":"9e2d9deb287c7f7da42e722bcc50f1e4b2a828c4" } \ No newline at end of file