• 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
..
animation Loading commit data...
cupertino Loading commit data...
dart Loading commit data...
examples Loading commit data...
foundation Loading commit data...
gestures Loading commit data...
harness Loading commit data...
material Loading commit data...
painting Loading commit data...
physics Loading commit data...
rendering Loading commit data...
scheduler Loading commit data...
semantics Loading commit data...
services Loading commit data...
widgets Loading commit data...
_goldens_io.dart Loading commit data...
_goldens_web.dart Loading commit data...
analysis_options.yaml Loading commit data...
flutter_test_config.dart Loading commit data...
image_data.dart Loading commit data...