How to set a radio button checked by default in Flutter?

Question

By default Flutter shows all the radio buttons empty (unchecked).

How to set a radio button checked by default?

I'm posting this question to document my solution, that may help some one, and also start a topic about this, because I didn't find anything about it here.

Below the radio button code:

class _ProductTypeScreen extends State<ProductType> {

  String _radioValue; //Initial definition of radio button value
  String choice;

  void radioButtonChanges(String value) {
    setState(() {
      _radioValue = value;
      switch (value) {
        case 'one':
          choice = value;
          break;
        case 'two':
          choice = value;
          break;
        case 'three':
          choice = value;
          break;
        default:
          choice = null;
      }
      debugPrint(choice); //Debug the choice in console
    });
  }

  // Now in the BuildContext... body widget:

  @override
  Widget build(BuildContext context) {
  //First of the three radio buttons

  Row(
    children: <Widget>[
      Radio(
        value: 'one',
        groupValue: _radioValue,
        onChanged: radioButtonChanges,
      ),
      Text(
        "One selected",
      ),
    ],
  ),

Bethezel

Answer 1

add an initial state

class _ProductTypeScreen extends State<ProductType> {

  String _radioValue; //Initial definition of radio button value
  String choice;

  // ------ [add the next block] ------ 
  @override
  void initState() {
    setState(() {
      _radioValue = "one";
    });
    super.initState();
  }
  // ------ end: [add the next block] ------  

  void radioButtonChanges(String value) {
    setState(() {
      _radioValue = value;
      switch (value) {
        case 'one':
          choice = value;
          break;
        case 'two':
          choice = value;
          break;
        case 'three':
          choice = value;
          break;
        default:
          choice = null;
      }
      debugPrint(choice); //Debug the choice in console
    });
  }

  @override
  Widget build(BuildContext context) {

Grub

Hi, How about if we need to retrieve _radioValue from storage? i tried it, but not working, because load SharedPreferences need to use await – Mix

with the preference, you can use a Future method and execute it from initState – Grub

I try it, but not pointing to saved value, please see #57041374 – Mix

Answer 2

I will give a simple example to understand :

int _radioSelected = 1;**
String _radioVal;

     child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Male'),
                  Radio(
                    value: 1,
                    groupValue: _radioSelected,
                    activeColor: Colors.blue,
                    onChanged: (value) {
                      setState(() {
                        _radioSelected = value;
                        _radioVal = 'male';
                      });
                    },
                  ),
                  Text('Female'),
                  Radio(
                    value: 2,
                    groupValue: _radioSelected,
                    activeColor: Colors.pink,
                    onChanged: (value) {
                      setState(() {
                        _radioSelected = value;
                        _radioVal = 'female';
                      });
                    },
                  )
                ],
              ),

Hexapod

Answer 3

This is how I have done my radio button

int? _radioSelected;
String _radioVal = "";

Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              children: [
                Radio(
                  value: 1,
                  groupValue: _radioSelected,
                  activeColor: Colors.blue,
                  onChanged: (value) {
                    setState(() {
                      _radioSelected = value as int;
                      _radioVal = 'Check In';
                      print(_radioVal);
                    });
                  },
                ),
                const Text("Check In"),
              ],
            ),
            Row(
              children: [
                Radio(
                  value: 2,
                  groupValue: _radioSelected,
                  activeColor: Colors.red,
                  onChanged: (value) {
                    setState(() {
                      _radioSelected = value as int;
                      _radioVal = 'Check Out';
                      print(_radioVal);
                    });
                  },
                ),
                const Text("Check Out"),
              ],
            ),
          ],
        ),

Ovary

Answer 4

You only need to set the groupValue equal to value; The radio will be selected. If you want to set a default selected radio. you just need to make equal operation in initState method.

@override
  void initState() {
    setState(() {
      groupValue = value;
    });
    super.initState();
}

If you want to set the clicked radio button selected. You need to change the groupValue in the onChanged method and call setState method.

 onChanged: (value) {
                    setState(() {
                        groupValue = value;
                    });
                  }

Raneeraney