How to  use Radio Button in Flutter

In any programming language radio button is a most useful widget for getting form input from the user. In Flutter, the radio button is also the most usable component. We can use Radio and RadioListTile in a flutter. In this article, we will learn "How to use Radio Button in Flutter"

 

How to use Radio Button in Flutter:

In Flutter we can use the Radio widget only without a label it takes only value and groupValue for selection.You can see in the below example:

Radio(
  value: "radio value", 
  groupValue: "group value", 
  onChanged: (value){
    print("Selected value-->" + value); 
  }
)

 

Gender Radio Button in Flutter/Radio button in Flutter Example:

We can use a radio button to ask for the gender of the user. Let's take an example for ask gender selection or a radio button in Flutter example.

 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,
                ),
              ),
              ListTile(
                title: Text("Other"),
                leading: Radio(
                  value: 3,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value!;
                    });
                  },
                  activeColor: Colors.green,
                ),
              ),

 

You can see the output in the below screenshot.

 

 

Flutter Radio button default Selected:

Sometimes we need to set the default selection in the Radio button from the list of radio buttons. You can see the below code for How to set the default selection in the Radio button.

import 'package:flutter/material.dart';

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

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  int val = 1;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          title: Text(
            "Errorgram",
          ),
        ),
        body: Center(
          child: Column(
            children: [
              ListTile(
                title: Text("Male",style: TextStyle(fontSize: 20,color: Colors.red),),
                leading: Radio(
                  value: 1,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value!;
                    });
                  },
                  activeColor: Colors.red,
                ),
              ),
              ListTile(
                title: Text("Female",style: TextStyle(fontSize: 20,color: Colors.red)),
                leading: Radio(
                  value: 2,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value!;
                    });
                  },
                  activeColor: Colors.red,
                ),
              ),
              ListTile(
                title: Text("Other",style: TextStyle(fontSize: 20,color: Colors.red)),
                leading: Radio(
                  value: 3,
                  groupValue: val,
                  onChanged: (value) {
                    setState(() {
                      val = value!;
                    });
                  },
                  activeColor: Colors.red,
                ),
              ),

            ],
          ),
        ),
      ),
    );
  }
}

 

Output:

Conclusion:

We saw How to use Radio Button in Flutter with Gender Example with Radio Buttons. and Also Learned Flutter Radio button default selection with example. I hope this post may help you.