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,
),
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
class RadioListTileExample extends StatefulWidget {
@override
_RadioListTileExampleState createState() => _RadioListTileExampleState();
}
class _RadioListTileExampleState extends State<RadioListTileExample> {
int _selectedValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'RadioListTile Example' ),
),
body: ListView(
children: <Widget>[
RadioListTile(
title: Text( 'Option 1' ),
subtitle: Text(
'Subtitle for Option 1' ),
value: 1,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
RadioListTile(
title: Text( 'Option 2' ),
subtitle: Text(
'Subtitle for Option 2' ),
value: 2,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
RadioListTile(
title: Text( 'Option 3' ),
subtitle: Text(
'Subtitle for Option 3' ),
value: 3,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
],
),
);
}
}
|
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,
),
home: RadioListTileExample(),
);
}
}
class RadioListTileExample extends StatefulWidget {
@override
_RadioListTileExampleState createState() => _RadioListTileExampleState();
}
class _RadioListTileExampleState extends State<RadioListTileExample> {
int _selectedValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'RadioListTile Example' ),
),
body: ListView(
children: <Widget>[
RadioListTile(
title: Text( 'Option 1' ),
subtitle: Text(
'Subtitle for Option 1' ),
value: 1,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
RadioListTile(
title: Text( 'Option 2' ),
subtitle: Text(
'Subtitle for Option 2' ),
value: 2,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
RadioListTile(
title: Text( 'Option 3' ),
subtitle: Text(
'Subtitle for Option 3' ),
value: 3,
groupValue:
_selectedValue,
onChanged: (value) {
setState(() {
_selectedValue =
value!;
});
},
),
],
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...