How to style the font in DropdownMenu Flutter items

When using a DropdownButton nested inside a Drawer, it’s essential to set isExpanded: true in the DropdownButton constructor to ensure it displays correctly.

For element customization, I’ve implemented a couple of functions: Widget _customHintOrSelectedItem(String? text) for customizing the hint or selected item and DropdownMenuItem<String> _customDropdownMenuItem(String value) for the dropdown menu items.

If you need further customization, consider using the selectedItemBuilder parameter in the DropdownButton constructor. This allows for more detailed styling and behavior adjustments for the selected item in the dropdown list.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DropdownDrawerScreen(),
    );
  }
}

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

  @override
  State<DropdownDrawerScreen> createState() => _DropdownDrawerScreenState();
}

class _DropdownDrawerScreenState extends State<DropdownDrawerScreen> {
  String? selectedValue;

  final List<String> items = [
    'Apples are sweet and very crunchy, perfect for a healthy snack',
    'Bananas are yellow, rich in potassium, and ideal for breakfast',
    'Cherries are small, red, absolutely delicious, and great for making pies',
    'Dates are sweet, chewy, very nutritious, and excellent for energy bars',
    'Elderberries are dark, tart, and good for syrups, with strong antioxidant properties'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dropdown in Drawer Example')),
      body: const Center(child: Text('Choose an option from the drawer')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text(
                'Choose a fruit',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            DropdownButton<String>(
              value: selectedValue,
              hint: _customHintOrSelectedItem(selectedValue),
              items: items.map(_customDropdownMenuItem).toList(),
              onChanged: (value) => setState(() => selectedValue = value),
              // Make the DropdownButton expand to fill the available space
              isExpanded: true,
            ),
          ],
        ),
      ),
    );
  }

  // Method to create a custom styled hint or selected value widget
  Widget _customHintOrSelectedItem(String? text) {
    return Text(
      text ?? 'Select your favorite fruit',
      style: const TextStyle(color: Colors.deepPurple, fontSize: 16),
    );
  }

  // Method to create a custom styled dropdown menu item
  DropdownMenuItem<String> _customDropdownMenuItem(String value) {
    final select = value == selectedValue;
    return DropdownMenuItem<String>(
      value: value,
      child: Text(
        value,
        style: TextStyle(
          color: select ? Colors.red : Colors.green,
          fontSize: 14,
        ),
      ),
    );
  }
}