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

Output: