Flutter Question posted in
The official Flutter documentation can be found here.

How to style the font in DropdownMenu Flutter items

I have a overflow problem in the list of items on my dropdown menu (print bellow). I’m trying to find a way to define font-size, or apply the overflow..
I followed the Flutter Doc from here: https://api.flutter.dev/flutter/material/DropdownMenu-class.html

The user can type in and search or simple select the item from the menu… All items come from a enum label… how can I style it (change font size, deal with the overflow etc..)?

enter image description here

Tags:

2

Answers


  1. 0

    Try below snippet for dropdown,

          DropdownButton(
              isExpanded: true,
              value: selectedValue,
              onChanged: (newValue) {
                //LOGIC HERE
              },
              items: items.map((item) {
                return DropdownMenuItem(
                  value: item,
                  child: Text(item, overflow: TextOverflow.ellipsis, maxLines: 1),
                );
              }).toList(),
            ),

    Happy Codding..!

    Login or Signup to reply.
  2. 0

    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,
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search