Update default menu text styles for Material 3 by TahaTesser · Pull Request #131930 · flutter/flutter

TahaTesser · 2023-08-04T14:47:34Z

Related #131676

Description

Fix default input text style for `DropdownMenu`

Fix default text style for `MenuAnchor`'s menu items (which `DropdownMenu` uses for menu items)

Default `DropdownMenu` Input text style

Default `DropdownMenu` menu item text style

Default `MenuAnchor` menu item text style

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [DropdownMenu]s. The first dropdown menu has an outlined border.

void main() => runApp(const DropdownMenuExample());

class DropdownMenuExample extends StatefulWidget {
  const DropdownMenuExample({super.key});

  @override
  State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  final TextEditingController colorController = TextEditingController();
  final TextEditingController iconController = TextEditingController();
  ColorLabel? selectedColor;
  IconLabel? selectedIcon;

  @override
  Widget build(BuildContext context) {
    final List<DropdownMenuEntry<ColorLabel>> colorEntries =
        <DropdownMenuEntry<ColorLabel>>[];
    for (final ColorLabel color in ColorLabel.values) {
      colorEntries.add(
        DropdownMenuEntry<ColorLabel>(
            value: color, label: color.label, enabled: color.label != 'Grey'),
      );
    }

    final List<DropdownMenuEntry<IconLabel>> iconEntries =
        <DropdownMenuEntry<IconLabel>>[];
    for (final IconLabel icon in IconLabel.values) {
      iconEntries
          .add(DropdownMenuEntry<IconLabel>(value: icon, label: icon.label));
    }

    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.green,
        // textTheme: const TextTheme(
        //   bodyLarge: TextStyle(
        //     fontWeight: FontWeight.bold,
        //     fontStyle: FontStyle.italic,
        //     decoration: TextDecoration.underline,
        //   ),
        // ),
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              const Text('DropdownMenus'),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    DropdownMenu<ColorLabel>(
                      controller: colorController,
                      label: const Text('Color'),
                      dropdownMenuEntries: colorEntries,
                      onSelected: (ColorLabel? color) {
                        setState(() {
                          selectedColor = color;
                        });
                      },
                    ),
                    const SizedBox(width: 20),
                    DropdownMenu<IconLabel>(
                      controller: iconController,
                      enableFilter: true,
                      leadingIcon: const Icon(Icons.search),
                      label: const Text('Icon'),
                      dropdownMenuEntries: iconEntries,
                      inputDecorationTheme: const InputDecorationTheme(
                        filled: true,
                        contentPadding: EdgeInsets.symmetric(vertical: 5.0),
                      ),
                      onSelected: (IconLabel? icon) {
                        setState(() {
                          selectedIcon = icon;
                        });
                      },
                    ),
                  ],
                ),
              ),
              const Text('Plain TextFields'),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      width: 150,
                      child: TextField(
                          controller: TextEditingController(text: 'Blue'),
                          decoration: const InputDecoration(
                            suffixIcon: Icon(Icons.arrow_drop_down),
                            labelText: 'Color',
                            border: OutlineInputBorder(),
                          )),
                    ),
                    const SizedBox(width: 20),
                    SizedBox(
                      width: 150,
                      child: TextField(
                          controller: TextEditingController(text: 'Smile'),
                          decoration: const InputDecoration(
                            prefixIcon: Icon(Icons.search),
                            suffixIcon: Icon(Icons.arrow_drop_down),
                            filled: true,
                            labelText: 'Icon',
                          )),
                    ),
                  ],
                ),
              ),
              if (selectedColor != null && selectedIcon != null)
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                        'You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 5),
                      child: Icon(
                        selectedIcon?.icon,
                        color: selectedColor?.color,
                      ),
                    )
                  ],
                )
              else
                const Text('Please select a color and an icon.')
            ],
          ),
        ),
      ),
    );
  }
}

enum ColorLabel {
  blue('Blue', Colors.blue),
  pink('Pink', Colors.pink),
  green('Green', Colors.green),
  yellow('Yellow', Colors.yellow),
  grey('Grey', Colors.grey);

  const ColorLabel(this.label, this.color);
  final String label;
  final Color color;
}

enum IconLabel {
  smile('Smile', Icons.sentiment_satisfied_outlined),
  cloud(
    'Cloud',
    Icons.cloud_outlined,
  ),
  brush('Brush', Icons.brush_outlined),
  heart('Heart', Icons.favorite);

  const IconLabel(this.label, this.icon);
  final String label;
  final IconData icon;
}

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

gspencergoog

This is going to break a bunch of golden tests in Google testing, but it's better that it is correct.

rydmike · 2023-08-07T15:42:36Z

@gspencergoog As the one that noticed it and raised the issue, I'm sure it will, it will probably not only break Google golden tests, but also a lot of expectation of default styles in apps that use them.

Thus some kind of warning/info before this eventually hits stable is probably prudent. Still, better to get it according to spec now, than a lot later. If somebody must have the old style it is an easy adjustment, so I don't think it should be big issue for anybody, as long as they get clear information.

Piinks · 2023-08-07T22:05:55Z

Thanks for sharing @TahaTesser! I've asked @HansMuller to take a look because he will better be able to give this the go ahead. You are right about using flutter-announce and such to follow the breaking change policy.

TahaTesser · 2023-08-08T11:23:33Z

Resolved conflict from #132104

Piinks · 2023-08-08T20:31:02Z

Caught up with @HansMuller today on this. This should be good to go but first let's ensure we have clear migration to the old styes set up. @TahaTesser can you make a migration guide for flutter/website? Thank you!

TahaTesser · 2023-08-08T20:32:46Z

Caught up with @HansMuller today on this. This should be good to go but first let's ensure we have clear migration to the old styes set up. @TahaTesser can you make a migration guide for flutter/website? Thank you!

Will do. Thanks for the update.

TahaTesser · 2023-08-10T15:59:03Z

After rebasing to conflicts, a50776e is causing rounding errors.
I'll update the PR to address rounding errors and file migration guide tomorrow.

TahaTesser · 2023-08-11T15:12:30Z

@gspencergoog
Can you please review and approve this one more time as I had to update the PR for rounding errors caused by the changes on master?

TahaTesser · 2023-08-11T15:13:04Z

@Piinks
Filed a migration guide flutter/website#9236

HansMuller

LGTM

…er#131930)

flutter/flutter@54c98d7...bd836cc 2023-08-23 [email protected] Roll Packages from c730a90 to 3060b1a (4 revisions) (flutter/flutter#133149) 2023-08-23 [email protected] Roll Flutter Engine from 7d56840865d2 to 72a06427bd37 (8 revisions) (flutter/flutter#133139) 2023-08-23 [email protected] Manual roll Flutter Engine from b190f9015049 to 7d56840865d2 (15 revisions) (flutter/flutter#133106) 2023-08-23 [email protected] Reference AppLifecycleListener from widgets library (flutter/flutter#132995) 2023-08-23 [email protected] Support disabling animations in the CLI (flutter/flutter#132239) 2023-08-23 [email protected] Don't run on Samsung S10, shift to Pixel 7 Pro (flutter/flutter#133085) 2023-08-23 [email protected] Add test to mark recording as leaking. (flutter/flutter#133073) 2023-08-22 [email protected] Revert "[gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda" (flutter/flutter#133095) 2023-08-22 [email protected] [gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda (flutter/flutter#133083) 2023-08-22 [email protected] Update default menu text styles for Material 3 (flutter/flutter#131930) 2023-08-22 [email protected] Roll Flutter Engine from 28b8bd5d5d91 to b190f9015049 (3 revisions) (flutter/flutter#133078) 2023-08-22 [email protected] Fix `FlexibleSpaceBar.title` doesn't respect the leading widget (flutter/flutter#132573) 2023-08-22 [email protected] Roll Flutter Engine from 21437d384b56 to 28b8bd5d5d91 (1 revision) (flutter/flutter#133075) 2023-08-22 [email protected] Roll Flutter Engine from 090754879679 to 21437d384b56 (1 revision) (flutter/flutter#133072) 2023-08-22 [email protected] Add support for `Future<List<int>?>` to `MatchesGoldenFile` (flutter/flutter#132965) 2023-08-22 [email protected] Roll Packages from e26f3b9 to c730a90 (3 revisions) (flutter/flutter#133067) 2023-08-22 [email protected] Roll Flutter Engine from ff375bf5d8eb to 090754879679 (1 revision) (flutter/flutter#133066) 2023-08-22 [email protected] Increase heap size for examples/flutter_view gradle build (flutter/flutter#133064) 2023-08-22 [email protected] Roll Flutter Engine from c5e0152b01f4 to ff375bf5d8eb (4 revisions) (flutter/flutter#133062) 2023-08-22 [email protected] Fix memory leak in Form (flutter/flutter#132987) 2023-08-22 [email protected] Re-enable Xcode Debug tests (flutter/flutter#132523) 2023-08-22 [email protected] Increase heap for gradle in examples/platform_view (flutter/flutter#133052) 2023-08-22 [email protected] Cover more tests with leak tracking. (flutter/flutter#132806) 2023-08-22 [email protected] Roll Flutter Engine from f5f099a4a5e3 to c5e0152b01f4 (4 revisions) (flutter/flutter#133049) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Breaking change migration for flutter/flutter#131930 --------- Co-authored-by: Parker Lougheed <[email protected]>

…9236) Breaking change migration for flutter/flutter#131930 --------- Co-authored-by: Parker Lougheed <[email protected]>

…er#131930)

flutter/flutter@54c98d7...bd836cc 2023-08-23 [email protected] Roll Packages from c730a90 to 3060b1a (4 revisions) (flutter/flutter#133149) 2023-08-23 [email protected] Roll Flutter Engine from 7d56840865d2 to 72a06427bd37 (8 revisions) (flutter/flutter#133139) 2023-08-23 [email protected] Manual roll Flutter Engine from b190f9015049 to 7d56840865d2 (15 revisions) (flutter/flutter#133106) 2023-08-23 [email protected] Reference AppLifecycleListener from widgets library (flutter/flutter#132995) 2023-08-23 [email protected] Support disabling animations in the CLI (flutter/flutter#132239) 2023-08-23 [email protected] Don't run on Samsung S10, shift to Pixel 7 Pro (flutter/flutter#133085) 2023-08-23 [email protected] Add test to mark recording as leaking. (flutter/flutter#133073) 2023-08-22 [email protected] Revert "[gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda" (flutter/flutter#133095) 2023-08-22 [email protected] [gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda (flutter/flutter#133083) 2023-08-22 [email protected] Update default menu text styles for Material 3 (flutter/flutter#131930) 2023-08-22 [email protected] Roll Flutter Engine from 28b8bd5d5d91 to b190f9015049 (3 revisions) (flutter/flutter#133078) 2023-08-22 [email protected] Fix `FlexibleSpaceBar.title` doesn't respect the leading widget (flutter/flutter#132573) 2023-08-22 [email protected] Roll Flutter Engine from 21437d384b56 to 28b8bd5d5d91 (1 revision) (flutter/flutter#133075) 2023-08-22 [email protected] Roll Flutter Engine from 090754879679 to 21437d384b56 (1 revision) (flutter/flutter#133072) 2023-08-22 [email protected] Add support for `Future<List<int>?>` to `MatchesGoldenFile` (flutter/flutter#132965) 2023-08-22 [email protected] Roll Packages from e26f3b9 to c730a90 (3 revisions) (flutter/flutter#133067) 2023-08-22 [email protected] Roll Flutter Engine from ff375bf5d8eb to 090754879679 (1 revision) (flutter/flutter#133066) 2023-08-22 [email protected] Increase heap size for examples/flutter_view gradle build (flutter/flutter#133064) 2023-08-22 [email protected] Roll Flutter Engine from c5e0152b01f4 to ff375bf5d8eb (4 revisions) (flutter/flutter#133062) 2023-08-22 [email protected] Fix memory leak in Form (flutter/flutter#132987) 2023-08-22 [email protected] Re-enable Xcode Debug tests (flutter/flutter#132523) 2023-08-22 [email protected] Increase heap for gradle in examples/platform_view (flutter/flutter#133052) 2023-08-22 [email protected] Cover more tests with leak tracking. (flutter/flutter#132806) 2023-08-22 [email protected] Roll Flutter Engine from f5f099a4a5e3 to c5e0152b01f4 (4 revisions) (flutter/flutter#133049) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

flutter/flutter@54c98d7...bd836cc 2023-08-23 [email protected] Roll Packages from cf8f7a0 to 6f55c61 (4 revisions) (flutter/flutter#133149) 2023-08-23 [email protected] Roll Flutter Engine from 7d56840865d2 to 72a06427bd37 (8 revisions) (flutter/flutter#133139) 2023-08-23 [email protected] Manual roll Flutter Engine from b190f9015049 to 7d56840865d2 (15 revisions) (flutter/flutter#133106) 2023-08-23 [email protected] Reference AppLifecycleListener from widgets library (flutter/flutter#132995) 2023-08-23 [email protected] Support disabling animations in the CLI (flutter/flutter#132239) 2023-08-23 [email protected] Don't run on Samsung S10, shift to Pixel 7 Pro (flutter/flutter#133085) 2023-08-23 [email protected] Add test to mark recording as leaking. (flutter/flutter#133073) 2023-08-22 [email protected] Revert "[gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda" (flutter/flutter#133095) 2023-08-22 [email protected] [gallery] roll gallery to ecfb9e5352bd12032301b12b30d5853d83d89bda (flutter/flutter#133083) 2023-08-22 [email protected] Update default menu text styles for Material 3 (flutter/flutter#131930) 2023-08-22 [email protected] Roll Flutter Engine from 28b8bd5d5d91 to b190f9015049 (3 revisions) (flutter/flutter#133078) 2023-08-22 [email protected] Fix `FlexibleSpaceBar.title` doesn't respect the leading widget (flutter/flutter#132573) 2023-08-22 [email protected] Roll Flutter Engine from 21437d384b56 to 28b8bd5d5d91 (1 revision) (flutter/flutter#133075) 2023-08-22 [email protected] Roll Flutter Engine from 090754879679 to 21437d384b56 (1 revision) (flutter/flutter#133072) 2023-08-22 [email protected] Add support for `Future<List<int>?>` to `MatchesGoldenFile` (flutter/flutter#132965) 2023-08-22 [email protected] Roll Packages from af40bd0 to cf8f7a0 (3 revisions) (flutter/flutter#133067) 2023-08-22 [email protected] Roll Flutter Engine from ff375bf5d8eb to 090754879679 (1 revision) (flutter/flutter#133066) 2023-08-22 [email protected] Increase heap size for examples/flutter_view gradle build (flutter/flutter#133064) 2023-08-22 [email protected] Roll Flutter Engine from c5e0152b01f4 to ff375bf5d8eb (4 revisions) (flutter/flutter#133062) 2023-08-22 [email protected] Fix memory leak in Form (flutter/flutter#132987) 2023-08-22 [email protected] Re-enable Xcode Debug tests (flutter/flutter#132523) 2023-08-22 [email protected] Increase heap for gradle in examples/platform_view (flutter/flutter#133052) 2023-08-22 [email protected] Cover more tests with leak tracking. (flutter/flutter#132806) 2023-08-22 [email protected] Roll Flutter Engine from f5f099a4a5e3 to c5e0152b01f4 (4 revisions) (flutter/flutter#133049) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Aug 4, 2023

TahaTesser marked this pull request as ready for review August 4, 2023 20:39

TahaTesser requested a review from gspencergoog August 7, 2023 14:12

gspencergoog approved these changes Aug 7, 2023

View reviewed changes

Piinks requested a review from HansMuller August 7, 2023 21:59

TahaTesser mentioned this pull request Aug 11, 2023

[breaking-change] Updated default text styles for the menus flutter/website#9236

Merged

3 tasks done

Update default menu text styles for Material 3

58ed8db

HansMuller approved these changes Aug 21, 2023

View reviewed changes

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 22, 2023

auto-submit Bot merged commit 1bc7916 into flutter:master Aug 22, 2023

TahaTesser deleted the update_menu_text_styles branch August 23, 2023 07:19

rydmike mentioned this pull request Aug 23, 2023

TextStyles in Menus do not follow Material-3 spec #131676

Closed

11 of 16 tasks

engine-flutter-autoroll mentioned this pull request Aug 23, 2023

Roll Flutter from 54c98d7433c5 to 575fd7ee22e8 (23 revisions) flutter/packages#4759

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 23, 2023

1bc7916 Update default menu text styles for Material 3 (flutter/flutt…

137203e

…er#131930)

engine-flutter-autoroll mentioned this pull request Aug 23, 2023

Roll Flutter from 54c98d7433c5 to bd836cc63ae0 (24 revisions) flutter/packages#4760

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 23, 2023

1bc7916 Update default menu text styles for Material 3 (flutter/flutt…

6811733

…er#131930)

HansMuller mentioned this pull request Aug 25, 2023

Flutter Framework Team: Notable Commits #121415

Closed

parlough added a commit to flutter/website that referenced this pull request Aug 28, 2023

[breaking-change] Updated default text styles for the menus (#9236)

b08a4b8

Breaking change migration for flutter/flutter#131930 --------- Co-authored-by: Parker Lougheed <[email protected]>

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023

1bc7916 Update default menu text styles for Material 3 (flutter/flutt…

aa3f252

…er#131930)

Navigation Menu

Repository navigation

Update default menu text styles for Material 3 - #131930

Update default menu text styles for Material 3#131930
auto-submit[bot] merged 1 commit into
flutter:masterfrom
TahaTesser:update_menu_text_styles

TahaTesser commented Aug 4, 2023

Uh oh!

gspencergoog left a comment

Uh oh!

rydmike commented Aug 7, 2023

Uh oh!

Piinks commented Aug 7, 2023

Uh oh!

TahaTesser commented Aug 8, 2023

Uh oh!

Piinks commented Aug 8, 2023

Uh oh!

TahaTesser commented Aug 8, 2023

Uh oh!

TahaTesser commented Aug 10, 2023 •

edited

Loading

Uh oh!

TahaTesser commented Aug 11, 2023

Uh oh!

TahaTesser commented Aug 11, 2023

Uh oh!

HansMuller left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

TahaTesser commented Aug 4, 2023

Description

Fix default input text style for DropdownMenu

Fix default text style for MenuAnchor's menu items (which DropdownMenu uses for menu items)

Default DropdownMenu Input text style

Default DropdownMenu menu item text style

Default MenuAnchor menu item text style

Code sample

Pre-launch Checklist

Uh oh!

gspencergoog left a comment

Choose a reason for hiding this comment

Uh oh!

rydmike commented Aug 7, 2023

Uh oh!

Piinks commented Aug 7, 2023

Uh oh!

TahaTesser commented Aug 8, 2023

Uh oh!

Piinks commented Aug 8, 2023

Uh oh!

TahaTesser commented Aug 8, 2023

Uh oh!

TahaTesser commented Aug 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

TahaTesser commented Aug 11, 2023

Uh oh!

TahaTesser commented Aug 11, 2023

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Fix default input text style for `DropdownMenu`

Fix default text style for `MenuAnchor`'s menu items (which `DropdownMenu` uses for menu items)

Default `DropdownMenu` Input text style

Default `DropdownMenu` menu item text style

Default `MenuAnchor` menu item text style

TahaTesser commented Aug 10, 2023 •

edited

Loading