Creating a Radio Widget in Flutter

An essential component of user interfaces, radio buttons let users pick one item from a list of options. We’ll look at how to make a Radio Widget in Flutter, a well-liked open-source UI software development toolkit, in this article.

We’ll create a straightforward Flutter application to show how to use the Radio Widget and investigate its features.

Prerequisites

Before we begin, make sure you have Flutter and Dart installed on your system. If not, you can follow the installation guide provided on the official Flutter website.

Implementing the Radio Widget

Open the lib/main.dart file in your project and replace the existing code with the following:

// Include necessary imports
import 'package:flutter/material.dart';

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

// Create the main app widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Radio Widget Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RadioExample(),
    );
  }
}

// Create the RadioExample widget
class RadioExample extends StatefulWidget {
  @override
  _RadioExampleState createState() => _RadioExampleState();
}

// Create the state for RadioExample
class _RadioExampleState extends State<RadioExample> {
  String selectedOption = 'Option 1';

  void _handleRadioValueChange(String value) {
    setState(() {
      selectedOption = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Radio Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RadioListTile<String>(
              title: Text('Option 1'),
              value: 'Option 1',
              groupValue: selectedOption,
              onChanged: _handleRadioValueChange,
            ),
            RadioListTile<String>(
              title: Text('Option 2'),
              value: 'Option 2',
              groupValue: selectedOption,
              onChanged: _handleRadioValueChange,
            ),
            RadioListTile<String>(
              title: Text('Option 3'),
              value: 'Option 3',
              groupValue: selectedOption,
              onChanged: _handleRadioValueChange,
            ),
            Text(
              'Selected Option: $selectedOption',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

Understanding the Code

In this section, we’ll break down the code snippet above and explain its key components:

• Imports: We begin by importing the necessary packages, including material.dart for Flutter’s Material Design widgets.
• MyApp Widget: This is the root widget of our Flutter app. It sets up the app’s title, theme, and initial screen, which is an instance of the RadioExample widget.
• RadioExample Widget: This is a StatefulWidget responsible for managing the state of our radio options. It extends the State class to handle state changes.
• _RadioExampleState: This is the state class associated with the RadioExample widget. It defines the selectedOption variable to keep track of the currently selected radio option.
• _handleRadioValueChange: This method is called when a radio option is selected. It updates the selectedOption based on the chosen value.
• build Method: The build method constructs the user interface of the app. It creates a Scaffold widget with an AppBar and a centered Column containing three RadioListTile widgets.
• RadioListTile: This widget represents a radio option with a title, value, group value, and an onChanged callback. The title represents the label of the option, value is the unique identifier, groupValue is the selected value, and onChanged is the callback for handling selection.
• Text Widget: This displays the currently selected option.

This will launch the app in an emulator or on a connected device, allowing you to interact with the radio options.

Here are some common properties of the Radio and RadioListTile widgets in Flutter, along with examples:

value (Radio and RadioListTile)

• The value associated with the radio option.
• Used to identify the selected option.

Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

groupValue (Radio and RadioListTile)

• The currently selected value from the group of radio options.
• Should match the value of the selected option.

Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

onChanged (Radio and RadioListTile)

• A callback function called when the radio option is selected.
• Typically used to update the groupValue with the selected value.

Radio(
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

title (RadioListTile)

The title or label for the radio option.

RadioListTile(
  title: Text('Option 1'),
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

subtitle (RadioListTile)

An optional subtitle or additional information for the radio option.

RadioListTile(
  title: Text('Option 1'),
  subtitle: Text('This is the first option'),
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

secondary (RadioListTile)

An optional widget to display next to the radio option, such as an icon.

RadioListTile(
  title: Text('Option 1'),
  secondary: Icon(Icons.star),
  value: 'option1',
  groupValue: selectedValue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

activeColor (Radio and RadioListTile)

RadioListTile(
  title: Text('Option 1'),
  value: 'option1',
  groupValue: selectedValue,
  activeColor: Colors.blue,
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

These are just a few of the properties available for the Radio and RadioListTile widgets in Flutter. You can customize the appearance and behavior of radio options further using these properties.

You’ve successfully created a basic Flutter Radio Widget that allows users to select a single option from a list. In this tutorial, we covered the key properties of the Radio Widget and demonstrated how to use them to build a simple app. You can now explore further customizations and integrate radio buttons into your own Flutter projects.

Related Posts

Flutter Image Widget Tutorial

Flutter Icon Widget Tutorials

Flutter GridView Tutorial

Flutter Webview Tutorial

Mastering FlatButton in Flutter

ElevatedButton Tutorial for Flutter