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 avalue
that matches thegroupValue
will be selected.onChanged
(required): A callback function that is called when the radio button is tapped. It is responsible for updating thegroupValue
to 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:
In this example:
We use a
Column
to display a list of radio buttons, each embedded in aListTile
for a better user interface.The
Radio
widgets have distinctvalue
properties (in this case,'Option 1'
and'Option 2'
) and share the samegroupValue
variable (selectedValue
) to indicate which radio button is currently selected.When a radio button is tapped, its
onChanged
callback updates theselectedValue
, causing the selected radio button to change.The
setState
function is used to trigger a rebuild of the UI when theselectedValue
is 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