DropdownButton in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

DropdownButton initial selected value behavior

What will be the initial selected value shown in this DropdownButton widget when the app starts?

Flutter

String dropdownValue = 'One';

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

A The dropdown shows 'One' as selected initially.

B The dropdown shows 'Two' as selected initially.

C The dropdown shows no value selected initially.

D The dropdown throws a runtime error because onChanged does not call setState.

💡 Hint

Look at the value property of DropdownButton and the initial value of dropdownValue.

The DropdownButton's value property is set to 'One', so it shows 'One' as the selected item initially. The onChanged callback updates the variable but without setState, UI won't update on change, but initial display is correct.

📝 Syntax

intermediate

Correct syntax for DropdownMenuItem list

Which option correctly creates a list of DropdownMenuItem for the DropdownButton?

A <String>['A', 'B', 'C'].map((val) => DropdownMenuItem<String>(value: val, child: Text(val))).toList()

B <String>['A', 'B', 'C'].map<DropdownMenuItem<String>>((String val) => DropdownMenuItem<String>(value: val, child: Text(val))).toList()

C <String>['A', 'B', 'C'].map((String val) => DropdownMenuItem(value: val, child: Text(val))).toList()

D <String>['A', 'B', 'C'].map<DropdownMenuItem<String>>((val) => DropdownMenuItem(value: val, child: Text(val))).toList()

💡 Hint

Check the type annotations and constructor usage carefully.

Option B correctly specifies the map generic type and uses the DropdownMenuItem constructor with typed value and child. Other options miss type annotations or constructor generics.

❓ lifecycle

advanced

Why DropdownButton does not update UI on selection?

Given this code snippet, why does the DropdownButton not update the selected value on user selection?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      items: <String>['One', 'Two', 'Three'].map((String val) {
        return DropdownMenuItem<String>(value: val, child: Text(val));
      }).toList(),
      onChanged: (String? newVal) {
        dropdownValue = newVal!;
      },
    );
  }
}

A Because the items list is not wrapped in a StatefulWidget.

B Because the DropdownButton value is not nullable and causes a runtime error.

C Because the dropdownValue variable is declared inside the build method.

D Because the onChanged callback does not call setState to notify Flutter to rebuild the widget.

💡 Hint

Think about how Flutter knows to update the UI when state changes.

Flutter rebuilds widgets when setState is called. Here, dropdownValue changes but setState is not called, so UI does not update.

❓ navigation

advanced

DropdownButton inside a form with validation

How can you ensure the DropdownButton's selected value is validated as required inside a Flutter Form widget?

Flutter

Form(
  key: _formKey,
  child: DropdownButtonFormField<String>(
    value: _selectedValue,
    items: _items,
    onChanged: (val) => setState(() => _selectedValue = val!),
    validator: (val) => val == null ? 'Please select an option' : null,
  ),
)

A Use DropdownButtonFormField with a validator function to check if value is null.

B Use DropdownButton with onChanged and manually check value before form submission.

C Wrap DropdownButton in a TextFormField to get validation features.

D Use a separate Checkbox to validate selection instead of DropdownButton.

💡 Hint

Flutter provides a special widget for dropdowns inside forms.

DropdownButtonFormField integrates with Form and supports validator for required selection validation.

🔧 Debug

expert

Identify the runtime error in DropdownButton usage

What runtime error will this DropdownButton code cause when the app runs?

Flutter

String? dropdownValue;

DropdownButton<String>(
  value: dropdownValue,
  items: <String>['Red', 'Green', 'Blue'].map((String val) {
    return DropdownMenuItem<String>(value: val, child: Text(val));
  }).toList(),
  onChanged: (String? newVal) {
    dropdownValue = newVal!;
  },
)

A A type mismatch error because dropdownValue is nullable but value expects non-null.

B A 'value' must be one of the items' values error because dropdownValue is null but value is non-nullable.

C No error, the dropdown shows no selection initially.

D A null pointer exception because onChanged assigns null to dropdownValue.

💡 Hint

DropdownButton allows value to be null, which shows no selection initially.

No runtime error occurs because the value property of DropdownButton is T? (nullable). When value is null, the dropdown displays no selected item initially, which is valid behavior. A runtime error only occurs if value is non-null and does not match any item's value.

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