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.