Flutter - RadioListTile Widget

Last Updated : 23 Jul, 2025

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

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.
  • 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.

Dart 
void main() {
  runApp(MyApp());
}


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.

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 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:

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


Complete Source Code

main.dart:

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:


Comment

Explore