Flutter – RadioListTile Widget
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 }); }, ), ], ), ); } } |