Radio buttons in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a radio button with value 1.

Flutter

Radio<int>(value: [1], groupValue: selectedValue, onChanged: (int? val) { setState(() { selectedValue = val!; }); })

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

A1

Btrue

C0

D"one"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an integer for the value.

Setting value to true or false instead of a number.

The value property sets the value of this radio button. Here, it should be 1.

2fill in blank

medium

Complete the code to update the selected radio button value inside onChanged.

Flutter

onChanged: (int? val) { setState(() { selectedValue = [1]; }); }

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

Aval!

B1

CselectedValue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a fixed number instead of the passed value.

Forgetting to unwrap the nullable value.

Inside onChanged, the new value is passed as val. We assign selectedValue = val! to update the state.

3fill in blank

hard

Fix the error in the code by completing the missing property to show the selected radio button.

Flutter

Radio<int>(value: 2, groupValue: [1], onChanged: onChanged)

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

AonChanged

BselectedValue

Cnull

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Setting groupValue to a fixed number instead of the state variable.

Setting groupValue to null or the onChanged function.

The groupValue must be the variable that holds the currently selected value, here selectedValue.

4fill in blank

hard

Fill both blanks to create a group of two radio buttons with values 1 and 2.

Flutter

Column(children: [Radio<int>(value: [1], groupValue: selectedValue, onChanged: onChanged), Radio<int>(value: [2], groupValue: selectedValue, onChanged: onChanged)])

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

A1

B2

C3

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for both radio buttons.

Using values outside the expected range.

The two radio buttons should have distinct values 1 and 2 to represent different choices.

5fill in blank

hard

Fill all three blanks to create a radio button with label and update state on change.

Flutter

ListTile(title: Text([1]), leading: Radio<int>(value: [2], groupValue: selectedValue, onChanged: (int? val) { setState(() { selectedValue = [3]; }); }))

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

A"Option 1"

B1

Cval!

D"Choice"

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched values between label and radio button.

Not updating the state with the passed value.

The label text is "Option 1", the radio button value is 1, and the state updates with the passed value val!.