An essential component of user interfaces, radio buttons let users pick one item from a list of options. We’ll look at how to make a Radio Widget in Flutter, a well-liked open-source UI software development toolkit, in this article.
We’ll create a straightforward Flutter application to show how to use the Radio Widget and investigate its features.
Prerequisites
Before we begin, make sure you have Flutter and Dart installed on your system. If not, you can follow the installation guide provided on the official Flutter website.
Implementing the Radio Widget
Open the lib/main.dart file in your project and replace the existing code with the following:
// Include necessary imports
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// Create the main app widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Radio Widget Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RadioExample(),
);
}
}
// Create the RadioExample widget
class RadioExample extends StatefulWidget {
@override
_RadioExampleState createState() => _RadioExampleState();
}
// Create the state for RadioExample
class _RadioExampleState extends State<RadioExample> {
String selectedOption = 'Option 1';
void _handleRadioValueChange(String value) {
setState(() {
selectedOption = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Radio Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RadioListTile<String>(
title: Text('Option 1'),
value: 'Option 1',
groupValue: selectedOption,
onChanged: _handleRadioValueChange,
),
RadioListTile<String>(
title: Text('Option 2'),
value: 'Option 2',
groupValue: selectedOption,
onChanged: _handleRadioValueChange,
),
RadioListTile<String>(
title: Text('Option 3'),
value: 'Option 3',
groupValue: selectedOption,
onChanged: _handleRadioValueChange,
),
Text(
'Selected Option: $selectedOption',
style: TextStyle(fontSize: 18),
),
],
),
),
);
}
}
Understanding the Code
In this section, we’ll break down the code snippet above and explain its key components:
- Imports: We begin by importing the necessary packages, including
material.dartfor Flutter’s Material Design widgets. - MyApp Widget: This is the root widget of our Flutter app. It sets up the app’s title, theme, and initial screen, which is an instance of the
RadioExamplewidget. - RadioExample Widget: This is a
StatefulWidgetresponsible for managing the state of our radio options. It extends theStateclass to handle state changes. - _RadioExampleState: This is the state class associated with the
RadioExamplewidget. It defines theselectedOptionvariable to keep track of the currently selected radio option. - _handleRadioValueChange: This method is called when a radio option is selected. It updates the
selectedOptionbased on the chosen value. - build Method: The
buildmethod constructs the user interface of the app. It creates aScaffoldwidget with anAppBarand a centeredColumncontaining threeRadioListTilewidgets. - RadioListTile: This widget represents a radio option with a title, value, group value, and an
onChangedcallback. Thetitlerepresents the label of the option,valueis the unique identifier,groupValueis the selected value, andonChangedis the callback for handling selection. - Text Widget: This displays the currently selected option.
This will launch the app in an emulator or on a connected device, allowing you to interact with the radio options.
Here are some common properties of the Radio and RadioListTile widgets in Flutter, along with examples:
value (Radio and RadioListTile)
- The value associated with the radio option.
- Used to identify the selected option.
Radio(
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
groupValue (Radio and RadioListTile)
- The currently selected value from the group of radio options.
- Should match the value of the selected option.
Radio(
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
onChanged (Radio and RadioListTile)
- A callback function called when the radio option is selected.
- Typically used to update the
groupValuewith the selected value.
Radio(
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
title (RadioListTile)
The title or label for the radio option.
RadioListTile(
title: Text('Option 1'),
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
subtitle (RadioListTile)
An optional subtitle or additional information for the radio option.
RadioListTile(
title: Text('Option 1'),
subtitle: Text('This is the first option'),
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
secondary (RadioListTile)
An optional widget to display next to the radio option, such as an icon.
RadioListTile(
title: Text('Option 1'),
secondary: Icon(Icons.star),
value: 'option1',
groupValue: selectedValue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
activeColor (Radio and RadioListTile)
RadioListTile(
title: Text('Option 1'),
value: 'option1',
groupValue: selectedValue,
activeColor: Colors.blue,
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
)
These are just a few of the properties available for the Radio and RadioListTile widgets in Flutter. You can customize the appearance and behavior of radio options further using these properties.
You’ve successfully created a basic Flutter Radio Widget that allows users to select a single option from a list. In this tutorial, we covered the key properties of the Radio Widget and demonstrated how to use them to build a simple app. You can now explore further customizations and integrate radio buttons into your own Flutter projects.
Related Posts