How to Create Dropdown in Flutter: Simple Guide

In Flutter, you create a dropdown menu using the DropdownButton widget. It requires a list of DropdownMenuItem widgets for options and a value to show the selected item. You handle changes with the onChanged callback to update the selected value.

Syntax

The DropdownButton widget has key parts:

• items: A list of DropdownMenuItem widgets representing options.
• value: The currently selected item.
• onChanged: A function called when the user selects a new item.

dart

DropdownButton<String>(
  value: selectedValue,
  items: <String>['One', 'Two', 'Three'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
)

Example

This example shows a dropdown with three options. When you select an option, it updates the displayed value.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String selectedValue = 'One';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dropdown Example')),
        body: Center(
          child: DropdownButton<String>(
            value: selectedValue,
            items: <String>['One', 'Two', 'Three'].map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? newValue) {
              setState(() {
                selectedValue = newValue!;
              });
            },
          ),
        ),
      ),
    );
  }
}

Output

A dropdown button labeled 'One' initially. When tapped, it shows options 'One', 'Two', and 'Three'. Selecting an option updates the label to that option.

Common Pitfalls

Common mistakes include:

• Not setting the value property, causing the dropdown to not show the selected item.
• Not updating the state inside onChanged, so the UI does not refresh.
• Using a null value without handling it, which can cause errors.

dart

/* Wrong: Missing value and no state update */
DropdownButton<String>(
  items: [
    DropdownMenuItem(value: 'A', child: Text('A')),
    DropdownMenuItem(value: 'B', child: Text('B')),
  ],
  onChanged: (val) {
    // no setState called
  },
);

/* Right: Set value and update state */
String selected = 'A';
DropdownButton<String>(
  value: selected,
  items: [
    DropdownMenuItem(value: 'A', child: Text('A')),
    DropdownMenuItem(value: 'B', child: Text('B')),
  ],
  onChanged: (val) {
    setState(() {
      selected = val!;
    });
  },
);

Quick Reference

Tips for using DropdownButton:

• Always provide a non-null value matching one of the items.
• Use setState inside onChanged to update UI.
• Wrap dropdown in a widget that provides enough space to avoid clipping.
• Use DropdownMenuItem to define each option with a value and child widget.

Key Takeaways

Use DropdownButton with items, value, and onChanged to create dropdowns.

Always update the selected value inside setState to refresh UI.

Provide DropdownMenuItem widgets with value and child for options.

Avoid null values for selected item unless handled explicitly.

Wrap dropdown in a layout widget to prevent clipping issues.