How to use Flutter Radio buttons
Radio buttons are a widget that allows users to select one option from a group of options. In Flutter, we can easily implement radio buttons using the Radio widget and a RadioListTile widget for a more convenient and user-friendly experience.
Constructor and parameters
The Radio widget provides a constructor with various parameters to customize its behavior and layout.
Radio({
Key? key,
required T value,
required T? groupValue,
required ValueChanged<T?>? onChanged,
MouseCursor? mouseCursor,
bool toggleable = false,
Color? activeColor,
MaterialStateProperty<Color?>? fillColor,
Color? focusColor,
Color? hoverColor,
MaterialStateProperty<Color?>? overlayColor,
double? splashRadius,
MaterialTapTargetSize? materialTapTargetSize,
VisualDensity? visualDensity,
FocusNode? focusNode,
bool autofocus = false
})
Let's take a closer look at each parameter and its purpose:
key: An optional parameter representing the key to identify the Radio widget.value: The value associated with the radio button. When the radio button is selected, this value is passed to theonChangedcallback. The typeTrepresents the data type of the value.groupValue: The currently selected value in the group of radio buttons. ThegroupValueshould match the value of the selected radio button. The typeTrepresents the data type of the value.onChanged: A callback function when the radio button is selected. It takes the newly selected value as its parameter, allowing us to handle the changes accordingly. The typeTrepresents the data type of the value.mouseCursor: An optional parameter specifying the mouse cursor to be used when the mouse hovers over the radio button.toggleable: An optional parameter determining whether the radio button can be toggled on and off. If set to true, clicking the selected radio button will deselect it.activeColor: An optional parameter that sets the radio button's color when selected.fillColor: An optional parameter that defines the fill color of the radio button. The color can be customized based on different states, such as when it's pressed, hovered over, or disabled. We can use aMaterialStateColorto define different colors for different states.focusColor: An optional parameter that sets the color of the radio button when it has keyboard focus.hoverColor: An optional parameter that sets the color of the radio button when the mouse hovers over it.overlayColor: An optional parameter that defines the color of the radio button's overlay when pressed. Similarly tofillColor, we can use aMaterialStateColorto customize the overlay color based on different states.splashRadius: An optional parameter that determines the size of the splash radius when the radio button is pressed. It specifies the radius of the circular ripple effect around the button.materialTapTargetSize: An optional parameter specifying the radio button's target size. It affects the hit test area of the button and can be used to adjust its overall size.visualDensity: An optional parameter that allows us to adjust the spacing and density of the radio button within its surrounding container.focusNode: An optional parameter that associates aFocusNodewith the radio button. It enables keyboard focus management and navigation.autofocus: An optional parameter determining whether the radio button should request focus when the widget is first displayed.
Implementation
We can follow the instructions given below to add a Radio widget in UI:
Import the necessary packages
To use the Radio widget, we need to import the flutter/material.dart package into your Dart file.
import 'package:flutter/material.dart';
Declaring variables
We need to declare selectedOption variable just above the build, which will hold the currently selected value of Radio widgets.
int selectedOption;
Adding a simple radio button
Below is a sample code of the Flutter Radio button with a listTile.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyHomePage(),));
}
class MyHomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MyHomePage> {
int selectedOption = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Educative Answers'),),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ListTile(
title: const Text('www.educative.io'),
leading: Radio<int>(
value: 1,
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value;
print("Button value: $value");
});
},
),
),
],
),
),
),
);
}
} Code explanation
Lines 21–38: Inside the
Column, aListTilewidget is added, representing a single row in the list. It contains aTextwidget as the title on line 5 and aRadiowidget as the optional leading widget on line 6.Lines 26–35. The
Radiowidget is the radio button allowing a single option to select.Line 27: Here, we assigned
1to itsvalueproperty to make it distinguish between a group of radio buttons.Line 28: The
groupValueproperty is set to theselectedOptionvariable, ensuring proper grouping of radio buttons.Line 29–34: The
onChangedproperty is a callback function that triggers when the radio button is selected. Within this callback,setState()is called on to update theselectedOptionvariable with the newly selected value.
Output
Adding multiple radio buttons with a default value
Below is a sample code of the Flutter for adding multiple Radio button with default value in a listTile.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyHomePage(),));
}
class MyHomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MyHomePage> {
int selectedOption = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Educative Answers'),),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ListTile(
title: const Text('Option 1'),
leading: Radio<int>(
value: 1,
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value;
});
},
),
),
ListTile(
title: const Text('Option 2'),
leading: Radio<int>(
value: 2,
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value;
});
},
),
),
],
),
),
),
);
}
} To have the default selected radio button, we need to assign a value to selectedOption variable like this:
int selectedOption = 1;
Code explanation
Lines 21–49: Inside, the
Columnare twoListTilewidgets, representing two rows in the column.Line 25: The
titleproperty of the firstListTileis set to aTextwidget with the text "Option 1".Line 26: The
leadingproperty of the firstListTileis set to aRadiowidget. TheRadiowidget is a circular button representing a single option to select.Line 27: The
valueproperty of the firstRadiowidget is set to1, indicating that it represents the first option.Line 28: The
groupValueproperty of the firstRadiowidget is set to theselectedOptionvariable. This property is used to group radio buttons together.Lines 29–34: The
onChangedproperty of the firstRadiowidget is set to acallbackfunction. When the radio button is selected, this function will be called. It uses thesetStatemethod to update theselectedOptionvariable with the newly selected value.Lines 36–47: The second
ListTileis similar to the first one, representing the second option.
Output
Change the radio button color
Below is a sample code of the Flutter for adding color to the Radio button:
Column(mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[ListTile(title: const Text('Option 1'),leading: Radio<int>(value: 1,groupValue: selectedOption,activeColor: Colors.red, // Change the active radio button color herefillColor: MaterialStateProperty.all(Colors.red), // Change the fill color when selectedsplashRadius: 20, // Change the splash radius when clickedonChanged: (int? value) {setState(() {selectedOption = value!;});},),),ListTile(title: const Text('Option 2'),leading: Radio<int>(value: 2,groupValue: selectedOption,activeColor: Colors.blue, // Change the active radio button color herefillColor: MaterialStateProperty.all(Colors.blue), // Change the fill color when selectedsplashRadius: 25, // Change the splash radius when clickedonChanged: (int? value) {setState(() {selectedOption = value!;});},),),],),
Code explanation
This code is similar to the previous code explanation, with some additional properties set for the Radio widget.
activeColor: This property sets the color of the selected radio button. In the firstRadiowidget, it is set toColors.red, and in the secondRadiowidget, it is set toColors.blue.fillColor: This property sets the color of the fill when the radio button is selected. It is set using theMaterialStateProperty.allconstructor. Both Radio widgets are set toColors.redandColors.bluerespectively.splashRadius: This property sets the radius of the splash effect when the radio button is clicked. In the firstRadiowidget, it is set to20, and in the secondRadiowidget, it is set to25.onChanged: This property defines thecallbackfunction when selecting the radio button. It updates theselectedOptionvariable.
Output
Complete code
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyHomePage(),));
}
class MyHomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MyHomePage> {
int selectedOption = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Educative Answers'),),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ListTile(
title: const Text('Option 1'),
leading: Radio<int>(
value: 1,
groupValue: selectedOption,
activeColor: Colors.red, // Change the active radio button color here
fillColor: MaterialStateProperty.all(Colors.red), // Change the fill color when selected
splashRadius: 20, // Change the splash radius when clicked
onChanged: (value) {
setState(() {
selectedOption = value;
});
},
),
),
ListTile(
title: const Text('Option 2'),
leading: Radio<int>(
value: 2,
groupValue: selectedOption,
activeColor: Colors.blue, // Change the active radio button color here
fillColor: MaterialStateProperty.all(Colors.blue), // Change the fill color when selected
splashRadius: 25, // Change the splash radius when clicked
onChanged: (value) {
setState(() {
selectedOption = value;
});
},
),
),
],
),
),
),
);
}
} Conclusion
Flutter provides a simple and effective way to implement radio buttons. We can create visually appealing and interactive user options with the Radio widget and its customizable properties. We can easily handle the selection changes and update the UI by utilizing the callback. With Flutter's radio buttons, we can enhance our app's user experience and create intuitive interfaces.
Free Resources
