Radio Widget

The Radio widget in Flutter is used to represent a set of mutually exclusive options. The user can select only one option from the group at a time. The widget has a value parameter that represents the current value of the radio button group, and onChanged parameter that is called when the value is changed. The onChanged parameter is a callback that takes a value argument that represents the new value of the radio button group.

The Radio widget has a number of optional parameters that can be used to customize its appearance and behavior. Some of the most commonly used parameters include groupValue, which is the currently selected value of the radio button group; value, which is the value of the radio button; activeColor, which is the color of the radio button when it is selected; and toggleable, which determines whether the radio button can be toggled on and off.

Here’s an example of using the Radio widget:

int _selectedOption = 1;

RadioListTile(
  title: Text('Option 1'),
  value: 1,
  groupValue: _selectedOption,
  onChanged: (newValue) {
    setState(() {
      _selectedOption = newValue;
    });
  },
),
RadioListTile(
  title: Text('Option 2'),
  value: 2,
  groupValue: _selectedOption,
  onChanged: (newValue) {
    setState(() {
      _selectedOption = newValue;
    });
  },
),
RadioListTile(
  title: Text('Option 3'),
  value: 3,
  groupValue: _selectedOption,
  onChanged: (newValue) {
    setState(() {
      _selectedOption = newValue;
    });
  },
),

In this example, the RadioListTile widget is used to create a set of radio buttons, each with a different title and value. The groupValue parameter is set to the _selectedOption variable, which represents the currently selected value of the radio button group. When a user selects a different option, the onChanged callback is called, and the _selectedOption variable is updated with the new value.

Differences between Radio, Switch, Checkbox Widgets

The main difference between the Radio, Switch, and Checkbox widgets is their appearance and interaction style.

• Checkbox: A checkbox allows the user to select multiple options from a list of options. It has a small square box on the left side that can be either checked or unchecked, and it displays the selected options as a list of values. A checkbox is ideal for lists where more than one option can be selected at a time.
• Radio: A radio button allows the user to select only one option from a list of options. It has a small circular button on the left side that can be selected or deselected, and it displays the selected option as a single value. A radio button is ideal for lists where only one option can be selected at a time.
• Switch: A switch allows the user to turn an option on or off. It has a small toggle button that can be either on or off, and it displays the selected option as a boolean value. A switch is ideal for toggling the state of a single option.

In summary, checkboxes allow the selection of multiple options, radio buttons allow the selection of a single option, and switches toggle the state of a single option.