Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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",
      ),
    ],
  ),
like image 687
Fellipe Sanches Avatar asked Feb 19 '19 20:02

Fellipe Sanches


People also ask

How do I keep my radio button checked?

You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .

Are radio buttons selected by default?

Selecting a radio button by default In this case, the first radio button is now selected by default. Note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected.

How do I activate radio button in Flutter?

You can add radio buttons in the Flutter app with Radio() widget. You have to pass the value for the button, the group value which can be used to switch the selection among radio buttons and onChange event which can be used to get the changed value when clicked on radio button.


2 Answers

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) {
like image 108
Juanes30 Avatar answered Sep 21 '22 09:09

Juanes30


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';
                      });
                    },
                  )
                ],
              ),
like image 28
youssef chaoulid Avatar answered Sep 21 '22 09:09

youssef chaoulid