DropdownButton in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a DropdownButton in Flutter?

A DropdownButton is a widget that shows a list of options when tapped, allowing the user to select one option from the list.

beginner

How do you provide the list of options to a DropdownButton?

You provide a list of DropdownMenuItem widgets to the items property of the DropdownButton. Each item represents one selectable option.

beginner

What property of DropdownButton holds the currently selected value?

The value property holds the currently selected item from the list of options.

beginner

How do you update the selected value when the user picks a new option?

You use the onChanged callback, which receives the new selected value. Inside it, you update the state to reflect the new selection.

beginner

Why should you use DropdownMenuItem widgets inside DropdownButton?

Because DropdownMenuItem defines each option's value and how it looks in the dropdown list, making the dropdown interactive and meaningful.

Which property of DropdownButton sets the list of selectable options?

A onChanged

B value

C selected

D items

The items property takes a list of DropdownMenuItem widgets that define the options.

What type of widget is used to represent each option inside a DropdownButton?

A DropdownMenuItem

B DropdownOption

C DropdownEntry

D DropdownChoice

Each option is a DropdownMenuItem widget.

How do you detect when the user selects a new option in a DropdownButton?

A Using the <code>onTap</code> callback

B Using the <code>onSelect</code> property

C Using the <code>onChanged</code> callback

D Using the <code>onPressed</code> property

The onChanged callback is called with the new value when the user selects an option.

What happens if the value property of DropdownButton is null?

A The dropdown crashes

B The dropdown shows no selected item

C The dropdown shows the first item selected

D The dropdown disables itself

If value is null, no item is selected initially.

Which of these is NOT a required property for a basic DropdownButton?

A icon

B value

C onChanged

D items

The icon property is optional and controls the dropdown arrow icon.

Explain how to create a simple dropdown menu in Flutter using DropdownButton.

Think about how you show options, track the selected one, and respond to user taps.

Describe the role of the onChanged callback in a DropdownButton.

It is how your app knows the user picked a different option.

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