Table of contents
1.
Introduction
2.
Flutter RadioButton
3.
Flutter RadioButton Example
4.
Radio <T> class
5.
Frequently Asked Questions
5.1.
What is Flutter used for?
5.2.
Is Flutter better than Java?
5.3.
Is Flutter a programming language?
5.4.
What is a Flutter RadioButton?
5.5.
What is the difference between the checkbox and Radiobutton?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter RadioButton

Author Abhay Trivedi
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In this article, we will learn how to use RadioButton in Flutter. We can have a radio button called the options button in Flutter, which holds the Boolean value. It allows users to choose only one option from a predefined set of options. This feature differs from a checkbox where we can select more than one option and restore the unselected state.

Flutter RadioButton

We can place the radio button in a group of two or more and display it on the screen as circular holes with white-space (for unselected) or a dot (for selected). We can provide a label for each corresponding radio button representing the radio button's choice. We can choose a radio button by clicking the mouse on the circular hole or using a keyboard shortcut.

This article will illustrate how to use radio buttons in Flutter. Flutter lets us to use radio buttons with the help of 'Radio', 'RadioListTile', or 'ListTitle' Widgets.The Flutter RadioButton does not maintain any state itself. Selecting any radio option invokes the onChanged callback and passes the value as a parameter. If the value and groupValue match, we will select the radio option.

Attributes Descriptions

groupValue

It specifies the currently selected item for the radio button group.

title

We use it to specify the radio button label.

value

Specifies the backhand value, represented by a radio button.

onChanged

Called whenever the user selects a radio button.

 

Demo example:

ListTile(
  title: const Text('www.codingninjas.com'),
  leading: Radio(
    value: BestSite.codingninjas,
    groupValue: _site,
    onChanged: (BestSite value) {
      setState(() {
        _site = value;
      });
    },
  ),
),

 

Here, the Radio widgets wrapped in the ListTiles and the currently selected text are passed into groupValue and supported by the example's State. Here, we will select the first Radio button off because _site is initialized to BestSite.codingninjas. If we press the second radio button, the example's State is updated with setState, updating _site to BestSite.gfg. It reconstructs the button with the updated groupValue. It will select the second button.

Flutter RadioButton Example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// This Widget is the main application widget
class MyApp extends StatelessWidget {
  static const String _title = 'Radio Button Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

enum BestSite { codingninjas, gfg, leetcode }

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  BestSite _site = BestSite.codingninjas;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ListTile(
          title: const Text('www.codingninjas.com'),
          leading: Radio(
            value: BestSite.codingninjas,
            groupValue: _site,
            onChanged: (BestSite? value) {
              setState(() {
                _site = value!;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('www.gfg.com'),
          leading: Radio(
            value: BestSite.gfg,
            groupValue: _site,
            onChanged: (BestSite? value) {
              setState(() {
                _site = value!;
              });
            },
          ),
        ),
        ListTile(
          title: const Text('www.leetcode.com'),
          leading: Radio(
            value: BestSite.leetcode,
            groupValue: _site,
            onChanged: (BestSite? value) {
              setState(() {
                _site = value!;
              });
            },
          ),
        ),
      ],
    );
  }
}

 

Output:

Radio <T> class

A material design radio button.

They are used to select between several mutually exclusive values. When any one radio button in a group is selected, the other radio buttons cease to be chosen. The values are of type T, the Radio class's type parameter. We commonly use Enums for this purpose.

The radio button itself does not hold any state. Instead, selecting the radio invokes the onChanged callback, passing the value as a parameter. If groupValue and value match, we will choose this radio. Most widgets will react to onChanged by calling State.setState to update the radio button's groupValue.

The syntax is the same as above, with a template class.

For example:

Normal code: 

  leading: Radio(
    value: BestSite.codingninjas,
    groupValue: _site,
    onChanged: (BestSite? value) {
      setState(() {
        _site = value!;
      });
    },
  ),

Template code:

  leading: Radio<SingingCharacter>(
    value: BestSite.codingninjas,
    groupValue: _site,
    onChanged: (BestSite? value) {
      setState(() {
        _site = value!;
      });
    },
  ),

Frequently Asked Questions

What is Flutter used for?

Flutter is Google's portable UI toolkit for crafting attractive, natively compiled mobile, web, & desktop applications from a single codebase. The Flutter works with existing code, is used by developers and organizations worldwide, and is free and open source.

Is Flutter better than Java?

Flutter is Google's Cross-platform framework that is faster, while Java language is a safer option for its strong support, documentation, and continuously updated. Different tools are also available for mobile, web, and desktop application development, but these two have the upper hand on the rest of the frameworks.

Is Flutter a programming language?

No, Flutter is not a programming language. Flutter is an SDK(software development kit) with prewritten code consisting of ready-to-use and customizable widgets, libraries, tools, and documentation that help build cross-platform apps.

What is a Flutter RadioButton?

Flutter lets us to use radio buttons with the help of 'Radio', 'RadioListTile', or 'ListTitle' Widgets. The flutter radio button does not support any state by itself. When we select any radio button, it invokes the onChanged callback and passes the value as a parameter.

What is the difference between the checkbox and Radiobutton?

Checkboxes and RadioButtons are elements for making selections. The Checkboxes allow the user to choose items from a fixed number of alternatives. In contrast, radio buttons allow the user to select exactly one thing from a list of several predefined options.

Conclusion

This article gives information about Flutter RadioButton and its uses. Being a Flutter developer, you must be well versed with the concepts like Flutter RadioButton, which you have learned just now.

Also read Flutter CheckboxFlutter TableFlutter CalendarFlutter Tabbar.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow.

Happy Learning!

Live masterclass