DropdownButton in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a DropdownButton with a list of string items.

Flutter

DropdownButton<String>(
  value: selectedValue,
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  items: [1].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Drag options to blanks, or click blank then click option'

Achoices

Boptions

CitemsList

Dvalues

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined.

Forgetting to map the list to DropdownMenuItem widgets.

The DropdownButton's items property expects a list to map over. Here, 'itemsList' is the correct list variable name.

2fill in blank

medium

Complete the code to update the selected value when a new item is chosen.

Flutter

onChanged: (String? newValue) {
  setState(() {
    selectedValue = [1];
  });
},

Drag options to blanks, or click blank then click option'

AnewValue

Bvalue

CselectedValue

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning the wrong variable or forgetting to update state.

Using the old selectedValue instead of the newValue.

The onChanged callback provides the new selected value as 'newValue', which should be assigned to 'selectedValue'.

3fill in blank

hard

Fix the error in the DropdownButton code by completing the missing property.

Flutter

DropdownButton<String>(
  [1]: selectedValue,
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  items: itemsList.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Drag options to blanks, or click blank then click option'

Aselected

BdefaultValue

CcurrentValue

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'selected' or 'defaultValue'.

Omitting the value property causing the dropdown to not show selection.

The DropdownButton uses the 'value' property to know which item is currently selected.

4fill in blank

hard

Fill both blanks to create a DropdownButton with a hint and disabled state.

Flutter

DropdownButton<String>(
  value: selectedValue,
  hint: [1],
  onChanged: [2] ? null : (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  items: itemsList.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Drag options to blanks, or click blank then click option'

AText('Select an option')

BisDisabled

Cnull

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a Text widget for hint.

Not setting onChanged to null to disable the dropdown.

The 'hint' property shows a placeholder text. The 'onChanged' is null when 'isDisabled' is true to disable the dropdown.

5fill in blank

hard

Fill all three blanks to create a DropdownButton with custom icon, underline, and expanded properties.

Flutter

DropdownButton<String>(
  value: selectedValue,
  icon: [1],
  underline: [2],
  isExpanded: [3],
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  items: itemsList.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Drag options to blanks, or click blank then click option'

AIcon(Icons.arrow_drop_down)

BContainer(height: 2, color: Colors.blue)

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using a boolean for icon instead of a widget.

Not providing a widget for underline.

Forgetting to set isExpanded to true for full width.

The 'icon' property sets a custom icon widget. The 'underline' property sets a custom widget below the dropdown. 'isExpanded: true' makes the dropdown fill its container width.

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