Flutter Radio clickable for all row instead of just the radio button

user_14041994 0
Viewed 49

I'm able to successfully apply the radio button on click on just the radio button but I'm looking for a way around how to apply the onclick of radio of the whole row below is my code :

Row(
  children: [
    Radio<String>(
      value: 'pay',
      activeColor: colorBlue,
      groupValue: _selectedPaymentMethod,
      fillColor: MaterialStateColor.resolveWith(
          (states) => Colors.grey[300]),
      onChanged: (value) {
        setState(() {
          _selectedPaymentMethod = value;
        });
      },
    ),
    Icon(
      Icons.monetization_on,
      size: 45,
    ),
    SizedBox(
      width: 20,
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Align(
            alignment: Alignment.centerLeft, child: Text("Credit")),
        SizedBox(
          height: 3,
        ),
        Align(
            alignment: Alignment.centerLeft,
            child: Text(
              "Coming soon!",
              style: TextStyle(
                  color: Colors.grey[400],
                  fontSize: 12,
                  fontWeight: FontWeight.normal,
                  fontFamily: 'Montserrat'),
            )),
        Align(
            alignment: Alignment.centerLeft, child: Text("200USD"))
      ],
    )
  ],

I will be glad if anyone can help with a work around on how I can apply onclick on the whole Row and get the same value like I do for the Radio in the above code, thanks in advance.

flutter-layout dart flutter radio-button
2 Answers

Wrap the row with an InkWell widget and change the value of the radio button


InkWell(
 onTap:(){
   _selectedPaymentMethod = !_selectedPaymentMethod;
   setState((){});
  },
 child: Row(),//add the full radio tile here
)
user_171690370

InkWell will work but If it is touched on radio button It will skip the tap event.

As for your case, might like RadioListTile.

RadioListTile<String>(
  value: 'pay',
  activeColor: Colors.blue,
  contentPadding: EdgeInsets.zero,
  title: Row(...

Also, to get widget tappable and get tap event from inner section GestureDetector is better option with onPanDown

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onPanDown: (_) {
    debugPrint("pan down");
  },
  child: Row(),
),
user_101571270
Related