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