radoWidged
The Radio widget is used in Flutter to create radio buttons, which allow users to select a single option from a list of choices. Each radio button has a unique value, and only one radio button in a group can be selected at a time. Here are some key properties and features of the Radio widget:
Key Properties and Features of the Radio Widget:
Radio Widget:value(required): The value associated with the radio button. It should be unique for each radio button in a group.groupValue(required): The current selected value among the radio buttons in the group. The radio button with avaluethat matches thegroupValuewill be selected.onChanged(required): A callback function that is called when the radio button is tapped. It is responsible for updating thegroupValueto reflect the selected value.**
activeColor: The color of the selected radio button's dot or icon.**
materialTapTargetSize: Specifies the minimum size of the tap target for the radio button.**
visualDensity: Adjusts the padding and size of the radio button's touch target.
Example Usage:
Here's a simple example of how to use the Radio widget in Flutter:
var selectedValue;
var radioValue1 = 'Option 1';
var radioValue2 = 'Option 2';
Column(
children: <Widget>[
ListTile(
title: Text('Option 1'),
leading: Radio(
value: radioValue1,
groupValue: selectedValue,
onChanged: (value) {
// Handle the change
setState(() {
selectedValue = value;
});
},
),
),
ListTile(
title: Text('Option 2'),
leading: Radio(
value: radioValue2,
groupValue: selectedValue,
onChanged: (value) {
// Handle the change
setState(() {
selectedValue = value;
});
},
),
),
],
)In this example:
We use a
Columnto display a list of radio buttons, each embedded in aListTilefor a better user interface.The
Radiowidgets have distinctvalueproperties (in this case,'Option 1'and'Option 2') and share the samegroupValuevariable (selectedValue) to indicate which radio button is currently selected.When a radio button is tapped, its
onChangedcallback updates theselectedValue, causing the selected radio button to change.The
setStatefunction is used to trigger a rebuild of the UI when theselectedValueis updated.
This is a basic example, and you can expand on it to create radio button groups with more options and custom styling as needed for your Flutter app.
Last updated