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 of it. A demo video is given below to get an idea of what we are going to do in this article.

Demo Video

Basic Example of RadioListTile

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.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step-by-Step Implementations

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: 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

Call the runApp() method in the main() method to start the app.

Step 4: Create MyApp Class

In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.

Step 5: Create RadioListTileExample Class

In this class, we are going to implement the RadioListTileExample widget that helps to create a Radio Button with a ListTile.

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

Code:

Complete Source Code

main.dart:

Output: