CODEWITHSUNDEEP
flutterdart
Milie
Milie

Reputation: 435

How to make Radio button text tapable?

I have two radio buttons for a sign up form that I want to be horizontally next to each other which I've done using a Row however the accompanying text does not select the radio button, only selecting the radio button itself does this...

I know that a RadioListTile allows for a radio button and a label but as far as I can tell it can only position vertically. Wrapping the Text in an InkWell could possibly work but I'm not sure how to save the state.

Row(
      children: <Widget>[
        Row(
          children: <Widget>[
            Radio(
                value: 0,
                groupValue: _radioGroupValue,
                activeColor: Colors.white,
                onChanged: (int value) {
                  changeRadioSelection(value);
                }),
            Text(
              'Client',
              style: TextStyle(color: Colors.white, fontSize: 15.0),
            )
          ],
        ),
        SizedBox(
          width: 20.0,
        ),
        Row(
          children: <Widget>[
            Radio(
              value: 1,
              groupValue: _radioGroupValue,
              onChanged: (int value) {
                changeRadioSelection(value);
              },
              activeColor: Colors.white,
            ),
            Text(
              'Customer',
              style: TextStyle(color: Colors.white, fontSize: 15.0),
            )
          ],
        )
      ],
    ),

State control method: 

void changeRadioSelection(int value) {
setState(() {
  _radioGroupValue = value;
  print('Radio butto selected: $value');
});}

This works fine except that the Text does not select the radio button. Is there a way to accomplish this. It will look cleaner for my UI to have it horizontally and not vertically.

Upvotes: 3

Views: 1483

Answers (1)

Adelina
Adelina

Reputation: 11881

Two solutions:

  • Either use RadioListTile
  • Or Wrap Row into inkWell (or any other tappable widget)
            InkWell(
              onTap: () => changeRadioSelection(1),
              child: Row(
                children: <Widget>[
                  Radio(
                    value: 1,
                    groupValue: _radioGroupValue,
                    onChanged: (int value) {
                      changeRadioSelection(value);
                    },
                    activeColor: Colors.grey,
                  ),
                  Text(
                    'Customer',
                    style: TextStyle(color: Colors.black, fontSize: 15.0),
                  )
                ],
              ),
            )

Upvotes: 7

Related Questions