×
×

Spread the love

In flutter, Radio Button is a material widget. We can use it in cases where the user has to select a single value from a set of values. If one radio button is selected, we cannot select the other radio buttons in the same group. In this example tutorial, we will learn how to use a radio button widget in flutter and its properties with examples.

Flutter Radio Button

Radio button in flutter is nothing but an option button where the user can select only one option from a group of options. The selected state is nothing but ON and unselected is OFF. If the user selects another option in the group then the currently selected option will be unselected. It means you can’t select more than one option.

The radio Button widget displays only a simple radio button without any text or label. To display a radio button with text/label use RadioListTile or wrap radio button and Text widgets in a row widget. I will use list tile in the examples below.

Constructor:

Radio({
Key key, 
@required T value, 
@required T groupValue, 
@required ValueChanged<T> onChanged, 
MouseCursor mouseCursor, 
bool toggleable: false, 
Color activeColor, 
Color focusColor, 
Color hoverColor, 
MaterialTapTargetSize materialTapTargetSize, 
VisualDensity visualDensity, 
FocusNode focusNode, 
bool autofocus: false
}) 

Flutter RadioButton Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  bool _value = false;
  int val = -1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green[400],
            title: Text("Flutter RadioButton"),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ListTile(
                title: Text("Male"),
                leading: Radio(
                  value: 1,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value;
                    });
                  },
                  activeColor: Colors.green,
                ),
              ),
              ListTile(
                title: Text("Female"),
                leading: Radio(
                  value: 2,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value;
                    });
                  },
                  activeColor: Colors.green,
                ),
              ),
            ],
          )
        )
    );
  }
}

Output:

flutter radio button

Flutter Radio Button Properties

Different flutter radio button properties are:

  • value(required)
  • groupValue(required)
  • activeColor
  • toggleable
  • onChanged(required)

value

We will use the value property to assign a value to the radio button. It represents the radio button. It is a required property which means without using it will throw an error.

Radio(
   value: 1,              
   onChanged: (value) {
   },                                
),

groupValue

The groupValue is the currently selected value for a group of radio buttons. The radio button is considered selected if the value matches the groupValue.

When we select the radio button the onChanged callback will be invoked. It will pass the value of the selected radio button. We will set the value to a global variable(val in our case). We will assign the global variable(val) to the groupValue property. It is also required property.

Radio(
   value: 1, 
   groupValue: val,             
   onChanged: (value) {
     setState(() {
       val = value;
     });
   },                                
),

activeColor

We will use the activeColor property to change the color of the radio button when it is in selected state. By default the active color will be theme’s primary color.

Radio(
   value: 1,
   groupValue: val,
   onChanged: (value) {
      setState(() {
         val = value;
      });
   },
   activeColor: Colors.green,
   ),

Output:

flutter radio button active color

toggleable

Generally, the radio button once selected cannot be unselected. If we want the user to be able to unselect, we will use the toggleable property. When we select, the onChanged will pass the value of the radio button and when we unselect, it will pass null.

Radio(
   value: 1, 
   groupValue: val,             
   onChanged: (value) {
     setState(() {
       val = value;
     });
   }, 
   toggleable: true,                               
),

onChanged

We will use onChanged property to get the value of the selected radio button. When we check the radio button the onChanged callback will invoke and pass the value of the radio button. The onChanged is a required property.

Radio(
   value: 1, 
   groupValue: val,             
   onChanged: (value) {
     setState(() {
       val = value;
     });
   },                               
),

Changing radio button border color when unselected

To change the border color of the radio button when it is unselected just wrap the radio button inside a Theme widget as a child and set ThemeData‘s unselectedWidgetColor property to your desired color.

body: Theme(
            data: ThemeData(
                unselectedWidgetColor: Colors.red
            ),
            child:ListTile(
              title: Text("Radio"),
              leading:Radio(
                  value: 1,
                  groupValue:val,
                  onChanged: (value) {
                    setState(() {
                      val = value;
                      print(val);
                    });
                  },
                  activeColor: Colors.green,
                  toggleable: true,
                ),
            )
          ),

Output:

flutter radio button bordercolor

That brings an end to flutter radio button example tutorial. Let’s catch up with some other flutter widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

2 responses to “Flutter Radio Button Example Tutorial”

  1. Moses says:

    Awesome and straight forward tutorial.

Leave a Reply

Your email address will not be published.