• 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
..
cupertino Loading commit data...
gestures/tap_and_drag Loading commit data...
material Loading commit data...
painting Loading commit data...
rendering Loading commit data...
sample_templates Loading commit data...
services Loading commit data...
ui/text Loading commit data...
widgets Loading commit data...
flutter_test_config.dart Loading commit data...
goldens_io.dart Loading commit data...
goldens_web.dart Loading commit data...