CODEWITHSUNDEEP
flutterdart
Bnd10706
Bnd10706

Reputation: 2363

Flutter - Custom Radio Buttons

I am trying to build a form in my Flutter app and I want to have the user select multiple items, similar to a radio button.

I don't like the way radio buttons look, so I want something more along the lines of a material button like this:

https://ibb.co/qMf76z4

I have tried building this as a list view, but I can't get it to behave like a radio button or a selector button. I have made a few attempts, but I really just want to have a material button look that act like radio buttons. When I submit the form the data within the buttons should transfer through.

Upvotes: 1

Views: 3873

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267414

enter image description here

I am not sure if I got you, here is what you can do. You can track which button was clicked by the following bool flags. 

bool _selected1 = false, _selected2 = false, _selected3 = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("RadioButton")),
    body: Column(
      children: <Widget>[
        RaisedButton(
          color: _selected1 ? Colors.deepOrange : Colors.green,
          onPressed: () => setState(() => _selected1 = !_selected1),
          child: Text("Me"),
        ),
        RaisedButton(
          color: _selected2 ? Colors.deepOrange : Colors.green,
          onPressed: () => setState(() => _selected2 = !_selected2),
          child: Text("My Family"),
        ),
        RaisedButton(
          color: _selected3 ? Colors.deepOrange : Colors.green,
          onPressed: () => setState(() => _selected3 = !_selected3),
          child: Text("Someone Else"),
        ),
      ],
    ),
  );
}

Upvotes: 6

Related Questions