Radio Button Alignment in flutter

user_5061213 0
Viewed 8648

I am a newbie in flutter. I wanted to Align the radio buttons. i.e Radio button should be Aligned Column wise whatever the text is there. I am using Column widget then Row Widget in it but getting the below result.

enter image description here

Code is here

 Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio button 1')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio 2')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Test')
                ],
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('RB 1')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Btn Radio 2')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Rad 3')
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
flutter widget
2 Answers

You can use the below lines I hope this will help you

enter image description here

Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                    child: Text('Radio button 1'),
                  )
                ],
              ),
              flex: 1,
            ),
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Radio 2'))
                ],
              ),
              flex: 1,
            ),
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Test'))
                ],
              ),
              flex: 1,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('RB 1'))
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Btn Radio 2'))
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                    child: Text('Rad 3'),
                  )
                ],
              ),
            ),
          ],
        ),
      ],
    ),
user_120966530

You can compare the widget I use according to the screen. you can do them with Flexible or Expanded

 Container(
     child: Column(
      children: [
        Row(
          children: [
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                      child: Text(
                    'Radio button 1',
                    maxLines: 2,
                  ))
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio 2')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Test')
                ],
              ),
            ),
          ],
        ),
        Row(
          children: [
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('RB 1')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Btn Radio 2')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Rad 3')
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  )
user_115449430
Related