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
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.
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.
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
});
},
),
// 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
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
});
},
),
],
),
);
}
} |