• Taha Tesser's avatar
    Update default menu text styles for Material 3 (#131930) · 1bc79169
    Taha Tesser authored
    Related https://github.com/flutter/flutter/issues/131676
    
    ## Description
    
    #### Fix default input text style for `DropdownMenu`
    
    ![dropdown_input](https://github.com/flutter/flutter/assets/48603081/301f8243-155a-4b8f-84a8-5e6b7bebb3bc)
    
    ### Fix default text style for  `MenuAnchor`'s menu items (which `DropdownMenu` uses for menu items)
    
    ![dropdown_item](https://github.com/flutter/flutter/assets/48603081/6b5be81a-72fc-4705-a577-074c7a4cad8f)
    
    ###  Default  `DropdownMenu` Input text style 
    
    ![Screenshot 2023-08-04 at 16 48 28](https://github.com/flutter/flutter/assets/48603081/bcd9da98-e74d-491e-ae64-6268ae0b3893)
    
    ### Default `DropdownMenu` menu item text style
    
    ![Screenshot 2023-08-04 at 16 50 19](https://github.com/flutter/flutter/assets/48603081/9592ca43-2854-45b5-8648-203ab65d9745)
    
    ### Default `MenuAnchor` menu item text style
    
    ![Screenshot 2023-08-04 at 14 34 28](https://github.com/flutter/flutter/assets/48603081/e87e1073-05f8-4dc7-a435-d864e9cce6ab)
    
    ### Code sample
    
    <details> 
    <summary>expand to view the code sample</summary> 
    
    ```dart
    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;
    }
    
    ``` 
    	
    </details>
    1bc79169
Name
Last commit
Last update
..
animated_icons Loading commit data...
shaders Loading commit data...
about.dart Loading commit data...
action_buttons.dart Loading commit data...
action_chip.dart Loading commit data...
action_icons_theme.dart Loading commit data...
adaptive_text_selection_toolbar.dart Loading commit data...
animated_icons.dart Loading commit data...
app.dart Loading commit data...
app_bar.dart Loading commit data...
app_bar_theme.dart Loading commit data...
arc.dart Loading commit data...
autocomplete.dart Loading commit data...
back_button.dart Loading commit data...
badge.dart Loading commit data...
badge_theme.dart Loading commit data...
banner.dart Loading commit data...
banner_theme.dart Loading commit data...
bottom_app_bar.dart Loading commit data...
bottom_app_bar_theme.dart Loading commit data...
bottom_navigation_bar.dart Loading commit data...
bottom_navigation_bar_theme.dart Loading commit data...
bottom_sheet.dart Loading commit data...
bottom_sheet_theme.dart Loading commit data...
button.dart Loading commit data...
button_bar.dart Loading commit data...
button_bar_theme.dart Loading commit data...
button_style.dart Loading commit data...
button_style_button.dart Loading commit data...
button_theme.dart Loading commit data...
calendar_date_picker.dart Loading commit data...
card.dart Loading commit data...
card_theme.dart Loading commit data...
checkbox.dart Loading commit data...
checkbox_list_tile.dart Loading commit data...
checkbox_theme.dart Loading commit data...
chip.dart Loading commit data...
chip_theme.dart Loading commit data...
choice_chip.dart Loading commit data...
circle_avatar.dart Loading commit data...
color_scheme.dart Loading commit data...
colors.dart Loading commit data...
constants.dart Loading commit data...
curves.dart Loading commit data...
data_table.dart Loading commit data...
data_table_source.dart Loading commit data...
data_table_theme.dart Loading commit data...
date.dart Loading commit data...
date_picker.dart Loading commit data...
date_picker_theme.dart Loading commit data...
debug.dart Loading commit data...
desktop_text_selection.dart Loading commit data...
desktop_text_selection_toolbar.dart Loading commit data...
desktop_text_selection_toolbar_button.dart Loading commit data...
dialog.dart Loading commit data...
dialog_theme.dart Loading commit data...
divider.dart Loading commit data...
divider_theme.dart Loading commit data...
drawer.dart Loading commit data...
drawer_header.dart Loading commit data...
drawer_theme.dart Loading commit data...
dropdown.dart Loading commit data...
dropdown_menu.dart Loading commit data...
dropdown_menu_theme.dart Loading commit data...
elevated_button.dart Loading commit data...
elevated_button_theme.dart Loading commit data...
elevation_overlay.dart Loading commit data...
expand_icon.dart Loading commit data...
expansion_panel.dart Loading commit data...
expansion_tile.dart Loading commit data...
expansion_tile_theme.dart Loading commit data...
feedback.dart Loading commit data...
filled_button.dart Loading commit data...
filled_button_theme.dart Loading commit data...
filter_chip.dart Loading commit data...
flexible_space_bar.dart Loading commit data...
floating_action_button.dart Loading commit data...
floating_action_button_location.dart Loading commit data...
floating_action_button_theme.dart Loading commit data...
flutter_logo.dart Loading commit data...
grid_tile.dart Loading commit data...
grid_tile_bar.dart Loading commit data...
icon_button.dart Loading commit data...
icon_button_theme.dart Loading commit data...
icons.dart Loading commit data...
ink_decoration.dart Loading commit data...
ink_highlight.dart Loading commit data...
ink_ripple.dart Loading commit data...
ink_sparkle.dart Loading commit data...
ink_splash.dart Loading commit data...
ink_well.dart Loading commit data...
input_border.dart Loading commit data...
input_chip.dart Loading commit data...
input_date_picker_form_field.dart Loading commit data...
input_decorator.dart Loading commit data...
list_tile.dart Loading commit data...
list_tile_theme.dart Loading commit data...
magnifier.dart Loading commit data...
material.dart Loading commit data...
material_button.dart Loading commit data...
material_localizations.dart Loading commit data...
material_state.dart Loading commit data...
material_state_mixin.dart Loading commit data...
menu_anchor.dart Loading commit data...
menu_bar_theme.dart Loading commit data...
menu_button_theme.dart Loading commit data...
menu_style.dart Loading commit data...
menu_theme.dart Loading commit data...
mergeable_material.dart Loading commit data...
motion.dart Loading commit data...
navigation_bar.dart Loading commit data...
navigation_bar_theme.dart Loading commit data...
navigation_drawer.dart Loading commit data...
navigation_drawer_theme.dart Loading commit data...
navigation_rail.dart Loading commit data...
navigation_rail_theme.dart Loading commit data...
no_splash.dart Loading commit data...
outlined_button.dart Loading commit data...
outlined_button_theme.dart Loading commit data...
page.dart Loading commit data...
page_transitions_theme.dart Loading commit data...
paginated_data_table.dart Loading commit data...
popup_menu.dart Loading commit data...
popup_menu_theme.dart Loading commit data...
progress_indicator.dart Loading commit data...
progress_indicator_theme.dart Loading commit data...
radio.dart Loading commit data...
radio_list_tile.dart Loading commit data...
radio_theme.dart Loading commit data...
range_slider.dart Loading commit data...
refresh_indicator.dart Loading commit data...
reorderable_list.dart Loading commit data...
scaffold.dart Loading commit data...
scrollbar.dart Loading commit data...
scrollbar_theme.dart Loading commit data...
search.dart Loading commit data...
search_anchor.dart Loading commit data...
search_bar_theme.dart Loading commit data...
search_view_theme.dart Loading commit data...
segmented_button.dart Loading commit data...
segmented_button_theme.dart Loading commit data...
selectable_text.dart Loading commit data...
selection_area.dart Loading commit data...
shadows.dart Loading commit data...
slider.dart Loading commit data...
slider_theme.dart Loading commit data...
snack_bar.dart Loading commit data...
snack_bar_theme.dart Loading commit data...
spell_check_suggestions_toolbar.dart Loading commit data...
spell_check_suggestions_toolbar_layout_delegate.dart Loading commit data...
stepper.dart Loading commit data...
switch.dart Loading commit data...
switch_list_tile.dart Loading commit data...
switch_theme.dart Loading commit data...
tab_bar_theme.dart Loading commit data...
tab_controller.dart Loading commit data...
tab_indicator.dart Loading commit data...
tabs.dart Loading commit data...
text_button.dart Loading commit data...
text_button_theme.dart Loading commit data...
text_field.dart Loading commit data...
text_form_field.dart Loading commit data...
text_selection.dart Loading commit data...
text_selection_theme.dart Loading commit data...
text_selection_toolbar.dart Loading commit data...
text_selection_toolbar_text_button.dart Loading commit data...
text_theme.dart Loading commit data...
theme.dart Loading commit data...
theme_data.dart Loading commit data...
time.dart Loading commit data...
time_picker.dart Loading commit data...
time_picker_theme.dart Loading commit data...
toggle_buttons.dart Loading commit data...
toggle_buttons_theme.dart Loading commit data...
toggleable.dart Loading commit data...
tooltip.dart Loading commit data...
tooltip_theme.dart Loading commit data...
tooltip_visibility.dart Loading commit data...
typography.dart Loading commit data...
user_accounts_drawer_header.dart Loading commit data...