DropdownButton in Flutter

Introduction

A DropdownButton lets users pick one option from a list. It saves space and keeps the screen tidy.

Choosing a country from a list when signing up.

Selecting a payment method during checkout.

Picking a color theme in app settings.

Choosing a language preference in a profile.

Syntax

Flutter

DropdownButton<T>(
  value: selectedValue,
  items: <DropdownMenuItem<T>>[
    DropdownMenuItem<T>(value: value1, child: Text('Option 1')),
    DropdownMenuItem<T>(value: value2, child: Text('Option 2')),
  ],
  onChanged: (T? newValue) {
    // update selectedValue
  },
)

T is the type of the values you want to select (like String or int).

You must provide items and onChanged to make it work.

Examples

A simple dropdown with fruit names as options.

Flutter

DropdownButton<String>(
  value: 'apple',
  items: [
    DropdownMenuItem(value: 'apple', child: Text('Apple')),
    DropdownMenuItem(value: 'banana', child: Text('Banana')),
  ],
  onChanged: (String? newValue) {
    // handle change
  },
)

Dropdown with numbers as options.

Flutter

DropdownButton<int>(
  value: 1,
  items: [
    DropdownMenuItem(value: 1, child: Text('One')),
    DropdownMenuItem(value: 2, child: Text('Two')),
  ],
  onChanged: (int? newValue) {
    // handle change
  },
)

Sample App

This app shows a dropdown with three fruits. When you pick one, it updates the selected fruit.

Flutter

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: Scaffold(
        body: Center(
          child: FruitDropdown(),
        ),
      ),
    );
  }
}

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

  @override
  State<FruitDropdown> createState() => _FruitDropdownState();
}

class _FruitDropdownState extends State<FruitDropdown> {
  String selectedFruit = 'apple';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: selectedFruit,
      items: const [
        DropdownMenuItem(value: 'apple', child: Text('Apple')),
        DropdownMenuItem(value: 'banana', child: Text('Banana')),
        DropdownMenuItem(value: 'orange', child: Text('Orange')),
      ],
      onChanged: (String? newValue) {
        if (newValue != null) {
          setState(() {
            selectedFruit = newValue;
          });
        }
      },
    );
  }
}

Important Notes

Always provide a value that matches one of the items values.

If onChanged is null, the dropdown is disabled.

Use setState to update the selected value inside a StatefulWidget.

Summary

DropdownButton lets users pick one choice from a list.

You must provide items, value, and onChanged.

Use inside a StatefulWidget to update the selected value dynamically.

Practice

1. What is the main purpose of the DropdownButton widget in Flutter?

easy

A. To display a list of checkboxes

B. To create a button that navigates to a new screen

C. To let users select one option from a list of choices

D. To input text from the user

Solution

1. Step 1: Understand DropdownButton functionality

   The DropdownButton widget is designed to show a list of options where the user can pick only one.

2. Step 2: Compare with other widgets

   Other widgets like checkboxes allow multiple selections, and buttons or text fields serve different purposes.

3. Final Answer:

   To let users select one option from a list of choices -> Option C

4. Quick Check:

   DropdownButton = single choice selector [OK]

Hint: DropdownButton is for single choice selection only [OK]

Common Mistakes:

• Confusing DropdownButton with CheckboxListTile
• Thinking it inputs text
• Assuming it navigates screens

2. Which of the following is the correct way to declare a DropdownButton with items and a selected value?

easy

A. DropdownButton<String>(value: selectedValue, items: itemsList, onChanged: onChangedFunction)

B. DropdownButton(value: selectedValue, items: itemsList)

C. DropdownButton(items: itemsList, onChanged: onChangedFunction)

D. DropdownButton<String>(value: selectedValue, onChanged: onChangedFunction)

Solution

1. Step 1: Check required parameters

   DropdownButton requires value, items, and onChanged to work properly.

2. Step 2: Verify syntax correctness

   DropdownButton<String>(value: selectedValue, items: itemsList, onChanged: onChangedFunction) includes all required parameters with correct types and syntax.

3. Final Answer:

   DropdownButton<String>(value: selectedValue, items: itemsList, onChanged: onChangedFunction) -> Option A

4. Quick Check:

   All required parameters present = DropdownButton<String>(value: selectedValue, items: itemsList, onChanged: onChangedFunction) [OK]

Hint: DropdownButton needs value, items, and onChanged [OK]

Common Mistakes:

• Omitting onChanged causes errors
• Missing value leads to runtime issues
• Not specifying generic type when needed

3. Given this code snippet inside a StatefulWidget:

String selected = 'One';

DropdownButton<String>(
  value: selected,
  items: [
    DropdownMenuItem(value: 'One', child: Text('One')),
    DropdownMenuItem(value: 'Two', child: Text('Two'))
  ],
  onChanged: (val) {
    setState(() {
      selected = val!;
    });
  },
)

What will be displayed initially in the dropdown button?

medium

A. One

B. Two

C. null

D. An error occurs

Solution

1. Step 1: Check initial value

   The variable selected is initialized to 'One'.

2. Step 2: Understand DropdownButton display

   The DropdownButton shows the current value which is 'One' initially.

3. Final Answer:

   One -> Option A

4. Quick Check:

   Initial value shown = 'One' [OK]

Hint: DropdownButton shows the current value initially [OK]

Common Mistakes:

• Assuming it shows the first item always
• Thinking null is shown if value is set
• Ignoring setState update

4. What is wrong with this DropdownButton code snippet?

DropdownButton<String>(
  value: selected,
  items: [
    DropdownMenuItem(value: 'A', child: Text('A')),
    DropdownMenuItem(value: 'B', child: Text('B'))
  ],
  onChanged: (val) {
    selected = val!;
  },
)

Assuming selected is a state variable in a StatefulWidget.

medium

A. Using 'val!' causes a syntax error

B. Not calling setState means UI won't update on selection

C. Missing 'value' parameter causes the dropdown to not show the selected item

D. Items list is empty, so dropdown won't show options

Solution

1. Step 1: Verify required parameters

   The code includes value: selected, items, and onChanged.

2. Step 2: Analyze onChanged function

   The onChanged updates selected but does not call setState, so UI won't rebuild to reflect changes.

3. Final Answer:

   Not calling setState means UI won't update on selection -> Option B

4. Quick Check:

   State update requires setState() [OK]

Hint: Always call setState to update UI after state change [OK]

Common Mistakes:

• Forgetting setState after changing state
• Omitting value parameter causes UI confusion
• Misunderstanding null safety with val!

5. You want to create a DropdownButton that shows a list of colors by name, but stores their hex codes as values. How should you define the items list to achieve this?

hard

A. [DropdownMenuItem(value: 'Red', child: Text('Red')), DropdownMenuItem(value: 'Green', child: Text('Green'))]

B. [DropdownMenuItem(value: 'Red', child: Text('#FF0000')), DropdownMenuItem(value: 'Green', child: Text('#00FF00'))]

C. [DropdownMenuItem(value: Colors.red, child: Text('Red')), DropdownMenuItem(value: Colors.green, child: Text('Green'))]

D. [DropdownMenuItem(value: '#FF0000', child: Text('Red')), DropdownMenuItem(value: '#00FF00', child: Text('Green'))]

Solution

1. Step 1: Understand value vs display

   The value should be the hex code (the stored data), and child is the visible text (color name).

2. Step 2: Match options to requirement

   [DropdownMenuItem(value: '#FF0000', child: Text('Red')), DropdownMenuItem(value: '#00FF00', child: Text('Green'))] correctly sets hex codes as values and color names as text.

3. Final Answer:

   [DropdownMenuItem(value: '#FF0000', child: Text('Red')), DropdownMenuItem(value: '#00FF00', child: Text('Green'))] -> Option D

4. Quick Check:

   Value = hex code, Text = color name [OK]

Hint: Value stores data, child shows label text [OK]

Common Mistakes:

• Swapping value and child text
• Using color constants instead of hex strings
• Using display text as value