DropdownButton in Flutter - UI Render Trace

Component - DropdownButton

The DropdownButton widget shows a list of options when tapped. The user can pick one option from the list. It is like choosing a flavor from an ice cream menu.

Widget Tree

Scaffold
 ├─ AppBar
 │    └─ Text
 └─ Center
      └─ DropdownButton<String>

The Scaffold provides the basic screen structure with an AppBar at the top showing a title. The main content is centered on the screen and contains the DropdownButton widget that displays the current selected option and opens a menu when tapped.

Render Trace - 4 Steps

Step 1: Scaffold

Step 2: Center

Step 3: DropdownButton<String>

Step 4: DropdownMenu

State Change - Re-render

Trigger:User taps an option in the dropdown menu

Before

DropdownButton shows the previously selected option

→

After

DropdownButton updates to show the newly selected option

Re-renders:DropdownButton and its child Text widget re-render to display the new selection

UI Quiz - 3 Questions

What happens when you tap the DropdownButton?

A A list of options appears below the button

B The app closes

C The button disappears

D The screen background changes color

Key Insight

DropdownButton is a simple way to let users pick one choice from many. It uses a button that opens a menu. When the user picks an option, the button updates to show that choice. This pattern keeps the screen clean and easy to use.

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