Flutter - RadioListTile Widget
Last Updated :
16 Oct, 2023
RadioListTile is a widget that combines a radio button with a list tile. It is often used in scenarios where you need to present a list of mutually exclusive options, and the user can select one option from the list. Each RadioListTile represents a single option in the list and consists of a title, a subtitle, an optional leading or trailing widget, and a radio button. In this article, we are going to implement the RadioListTile widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.
Basic Example of RadioListTile
Dart
RadioListTile<int>(
title: Text('Option 1'),
subtitle: Text('Description of Option 1'),
value: 1,
groupValue: selectedValue,
onChanged: (int? value) {
setState(() {
selectedValue = value;
});
},
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementations
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
home: RadioListTileExample(),
);
}
}
Step 5: Create RadioListTileExample Class
In this class we are going to Implement the RadioListTileExample widget that help to create Radio Button with a List tile.Comments are added for better understanding.
RadioListTile(
title: Text('Option 1'), // Display the title for option 1
subtitle: Text(
'Subtitle for Option 1'), // Display a subtitle for option 1
value: 1, // Assign a value of 1 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 1 is selected
});
},
),
Dart
// Create the state for the RadioListTile example
class RadioListTileExample extends StatefulWidget {
@override
_RadioListTileExampleState createState() => _RadioListTileExampleState();
}
class _RadioListTileExampleState extends State<RadioListTileExample> {
// Create a variable to store the selected value
int _selectedValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioListTile Example'), // Set the title of the app bar
),
body: ListView(
children: <Widget>[
// Create a RadioListTile for option 1
RadioListTile(
title: Text('Option 1'), // Display the title for option 1
subtitle: Text(
'Subtitle for Option 1'), // Display a subtitle for option 1
value: 1, // Assign a value of 1 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 1 is selected
});
},
),
// Create a RadioListTile for option 2
RadioListTile(
title: Text('Option 2'), // Display the title for option 2
subtitle: Text(
'Subtitle for Option 2'), // Display a subtitle for option 2
value: 2, // Assign a value of 2 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 2 is selected
});
},
),
// Create a RadioListTile for option 3
RadioListTile(
title: Text('Option 3'), // Display the title for option 3
subtitle: Text(
'Subtitle for Option 3'), // Display a subtitle for option 3
value: 3, // Assign a value of 3 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 3 is selected
});
},
),
],
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
home: RadioListTileExample(),
);
}
}
// Create the state for the RadioListTile example
class RadioListTileExample extends StatefulWidget {
@override
_RadioListTileExampleState createState() => _RadioListTileExampleState();
}
class _RadioListTileExampleState extends State<RadioListTileExample> {
// Create a variable to store the selected value
int _selectedValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('RadioListTile Example'), // Set the title of the app bar
),
body: ListView(
children: <Widget>[
// Create a RadioListTile for option 1
RadioListTile(
title: Text('Option 1'), // Display the title for option 1
subtitle: Text(
'Subtitle for Option 1'), // Display a subtitle for option 1
value: 1, // Assign a value of 1 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 1 is selected
});
},
),
// Create a RadioListTile for option 2
RadioListTile(
title: Text('Option 2'), // Display the title for option 2
subtitle: Text(
'Subtitle for Option 2'), // Display a subtitle for option 2
value: 2, // Assign a value of 2 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 2 is selected
});
},
),
// Create a RadioListTile for option 3
RadioListTile(
title: Text('Option 3'), // Display the title for option 3
subtitle: Text(
'Subtitle for Option 3'), // Display a subtitle for option 3
value: 3, // Assign a value of 3 to this option
groupValue:
_selectedValue, // Use _selectedValue to track the selected option
onChanged: (value) {
setState(() {
_selectedValue =
value!; // Update _selectedValue when option 3 is selected
});
},
),
],
),
);
}
}
Output:
Similar Reads
Flutter - ListTile Widget
The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 min read
Flutter - Stateless Widget
Stateless Widget is something that does not have a state. To understand a Stateless Widget, you need to clearly understand widgets and states. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To le
4 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Table Widget in Flutter
Table widget is used to display items in a table layout. There is no need to use Rows and Columns to create a table. If we have multiple rows with the same width of columns then Table widget is the right approach. SliverList or Column will be most suitable if we only want to have a single column. Th
3 min read
Flutter - LayoutBuilder Widget
In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The LayoutB
3 min read
Flutter - Positioned Widget
Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets. Constr
3 min read
OffStage Widget in Flutter
Flutter provides an inbuilt widget called “Offstageâ€, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit
4 min read
Flutter - Inherited Widget
If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read
Flutter - OctoImage Widget
The OctoImage widget in Flutter requires an ImageProvider to display images in an application. The images in the OctoImage widget can be supplied with a Progress indicator or a Place holder for loading the Image in it. An OctoImage widget makes use of the Octosets which are nothing but the combinati
4 min read
Flutter - Implement SwitchListTile Widget
The SwitchListTile widget in Flutter is a combination of a ListTile and a switch. It provides a user-friendly way to toggle a boolean setting or option within your app. Here's how you can implement a SwitchListTile widget. A sample video is given below to get an idea about what we are going to do in
6 min read