DropdownButton in Flutter - Mini App: Build & Ship

Build: Fruit Selector

A screen where the user can pick a fruit from a dropdown list and see their choice displayed below.

Target UI

---------------------
| Fruit Selector    |
---------------------
| Select a fruit ▼  |
|                   |
| Your choice:      |
|                   |
---------------------

Add a DropdownButton with at least 4 fruit options: Apple, Banana, Cherry, Date

Show the selected fruit below the dropdown with the label 'Your choice:'

Initialize the dropdown with 'Apple' selected

Update the displayed choice when user selects a different fruit

Starter Code

Flutter

import 'package:flutter/material.dart';

class FruitSelector extends StatefulWidget {
  @override
  State<FruitSelector> createState() => _FruitSelectorState();
}

class _FruitSelectorState extends State<FruitSelector> {
  String selectedFruit = 'Apple';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fruit Selector')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add DropdownButton here
            // TODO: Show selected fruit below
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class FruitSelector extends StatefulWidget {
  @override
  State<FruitSelector> createState() => _FruitSelectorState();
}

class _FruitSelectorState extends State<FruitSelector> {
  String selectedFruit = 'Apple';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fruit Selector')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            DropdownButton<String>(
              value: selectedFruit,
              items: const [
                DropdownMenuItem(value: 'Apple', child: Text('Apple')),
                DropdownMenuItem(value: 'Banana', child: Text('Banana')),
                DropdownMenuItem(value: 'Cherry', child: Text('Cherry')),
                DropdownMenuItem(value: 'Date', child: Text('Date')),
              ],
              onChanged: (String? newValue) {
                if (newValue != null) {
                  setState(() {
                    selectedFruit = newValue;
                  });
                }
              },
            ),
            const SizedBox(height: 20),
            Text('Your choice: $selectedFruit', style: const TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

We use a DropdownButton widget with a list of DropdownMenuItem for each fruit. The value property is set to the currently selected fruit. When the user picks a new fruit, the onChanged callback updates the selectedFruit state using setState, which triggers the UI to refresh and show the new choice below the dropdown.

This simple pattern lets users pick from a list and see their selection immediately.

Final Result

Completed Screen

---------------------
| Fruit Selector    |
---------------------
| Select a fruit ▼  |
|                   |
| Your choice: Apple |
---------------------

Tapping the dropdown shows the list of fruits: Apple, Banana, Cherry, Date

Selecting a fruit updates the text below to show the chosen fruit

Stretch Goal

Add an icon next to the dropdown that changes color based on the selected fruit

💡 Hint

Use a Row with an Icon widget and change its color inside setState when the fruit changes

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