• 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
..
bin Loading commit data...
data Loading commit data...
generated Loading commit data...
lib Loading commit data...
test Loading commit data...
README.md Loading commit data...
pubspec.yaml Loading commit data...
test.json Loading commit data...