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.