commit 1359e25af8094925d06f9c5dfe29ffe75dd233cf
author Taha Tesser <tessertaha@gmail.com> Tue Dec 03 23:19:12 2024 +0200
committer dart-internal-monorepo <dart-internal-monorepo@dart-ci-internal.iam.gserviceaccount.com> Tue Dec 03 13:22:30 2024 -0800
tree 5cc2fd5489fa06a782b24880633b78f323c892cd
parent 7505d5c9db35bc47e15f882ba3a49cfe775b5a84

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