How to get this kind of radio button in flutter

Question

I am trying to create a gender selection functionality that contains 3 radio buttons. I have done this code but it is not working as I want it.

Radio button container

final _radio_colume_container = Container(
margin: const EdgeInsets.fromLTRB(50, 15, 50, 00),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
  Text(
    'Gender*',
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      add_radio_button(0, 'Male'),
      add_radio_button(1, 'Female'),
      add_radio_button(2, 'Others'),
    ],
  ),
],
),
);

add_radio_button Method

Row add_radio_button(int btnValue, String title) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[

  Radio(
    activeColor: Colors.green,
    value: btnValue,
    groupValue: -1,
    onChanged: _handleradiobutton,
  ),
  Text(title)
],
);
}

I am achieving this

I want to achieve this.

I see no difference, Is it the **padding** that is different in both images?? — Chenna Reddy, Feb 12 '19 at 07:04
@ChennaReddy padding is also not coming correctly and the space between radio button and title are also more, I want to reduce that. — Shubham, Feb 12 '19 at 07:20
@MazinIbrahim Yes but I will work on that later, first I need to get this same layout. — Shubham, Feb 12 '19 at 07:21
`Radio` has - `materialTapTargetSize:` property - make it - `materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,` — anmol.majhail, Feb 12 '19 at 07:29

Shubham Singh · Answer 1 · 2020-03-01T13:41:07.407

  List gender=["Male","Female","Other"];

  String select;

 Row addRadioButton(int btnValue, String title) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    Radio(
      activeColor: Theme.of(context).primaryColor,
      value: gender[btnValue],
      groupValue: select,
      onChanged: (value){
        setState(() {
          print(value);
          select=value;
        });
      },
    ),
    Text(title)
  ],
);
 }
            //Use the above widget where you want the radio button
                child: Row(
                children: <Widget>[
                  addRadioButton(0, 'Male'),
                  addRadioButton(1, 'Female'),
                  addRadioButton(2, 'Others'),
                ],
              ),

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. — Piotr Labunski, Feb 29 '20 at 17:45

score 1 · Answer 2 · answered Feb 12 '19 at 07:29

1

You should take a look at RadioListTile as it provides a dense property which will help reduce the padding between the button and its title.

answered Feb 12 '19 at 07:29

Mazin Ibrahim

7,433
2
33
40

Yeah sure, First I will try your solution then if it works then I will accept it. – Shubham Feb 12 '19 at 15:23

Zujaj Misbah Khan · Answer 3 · 2020-12-09T06:29:19.930

After applying some refactoring from @Shubham's answer, presenting a generalized version of the code for multiple purposes.

import 'package:flutter/material.dart';

/// Requires a list of string ['Male','Female','Other'] only once.

class GenderField extends StatelessWidget {
 
 final List<String> genderList;

  GenderField(this.genderList);

  @override
  Widget build(BuildContext context) {
    String select;
    Map<int, String> mappedGender = genderList.asMap();

    return StatefulBuilder(
      builder: (_, StateSetter setState) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            'Gender : ',
            style: TextStyle(fontWeight: FontWeight.w400),
          ),
          ...mappedGender.entries.map(
            (MapEntry<int, String> mapEntry) => Row(
                mainAxisAlignment: MainAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Radio(
                    activeColor: Theme.of(context).primaryColor,
                    groupValue: select,
                    value: genderList[mapEntry.key],
                    onChanged: (value) => setState(() => select = value),
                  ),
                  Text(mapEntry.value)
                ]),
          ),
        ],
      ),
    );
  }
}

In the main.dart, this widget can be called as

// Some code 
  Padding(
            padding: EdgeInsets.only(bottom: 10),
            child: GenderField(['Male','Female','Other'])
)

score 0 · Answer 4 · edited May 21 '22 at 10:31

Padding(
    padding: EdgeInsets.only(left: 5, right: 5),
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Gender",
                              style: TextStyle(fontSize: 19),
                            ),
                            Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Expanded(
                                    child: ListTile(
                                      title: const Text('M'),
                                      leading: Radio<Gender>(
                                        fillColor:
                                            MaterialStateColor.resolveWith(
                                                (states) => Colors.blue),
                                        value: Gender.male,
                                        groupValue: _gen,
                                        onChanged: (Gender? value) {
                                          setState(() {
                                             _gen = value;
                                          });
                                        },
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: ListTile(
                                      title: const Text('F'),
                                      leading: Radio<Gender>(
                                        fillColor:
                                            MaterialStateColor.resolveWith(
                                                (states) => Colors.blue),
                                        value: Gender.female,
                                        groupValue: _gen,
                                        onChanged: (Gender? value) {
                                          setState(() {
                                            _gen = value;
                                          });
                                        },
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: ListTile(
                                      title: const Text('O'),
                                      leading: Radio<Gender>(
                                        fillColor:
                                            MaterialStateColor.resolveWith(
                                                (states) => Colors.blue),
                                        value: Gender.other,
                                        groupValue: _gen,
                                        onChanged: (Gender? value) {
                                          setState(() {
                                            _gen = value;
                                        


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

How to get this kind of radio button in flutter

4 Answers4