flutterdartflutter-layout

Flutter : Custom Radio Button


How can I create a custom radio button group like this in flutter custom radio in flutter


Solution

  • Here is the full code

    class CustomRadio extends StatefulWidget {
      @override
      createState() {
        return new CustomRadioState();
      }
    }
    
    class CustomRadioState extends State<CustomRadio> {
      List<RadioModel> sampleData = new List<RadioModel>();
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        sampleData.add(new RadioModel(false, 'A', 'April 18'));
        sampleData.add(new RadioModel(false, 'B', 'April 17'));
        sampleData.add(new RadioModel(false, 'C', 'April 16'));
        sampleData.add(new RadioModel(false, 'D', 'April 15'));
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("ListItem"),
          ),
          body: new ListView.builder(
            itemCount: sampleData.length,
            itemBuilder: (BuildContext context, int index) {
              return new InkWell(
                //highlightColor: Colors.red,
                splashColor: Colors.blueAccent,
                onTap: () {
                  setState(() {
                    sampleData.forEach((element) => element.isSelected = false);
                    sampleData[index].isSelected = true;
                  });
                },
                child: new RadioItem(sampleData[index]),
              );
            },
          ),
        );
      }
    }
    
    class RadioItem extends StatelessWidget {
      final RadioModel _item;
      RadioItem(this._item);
      @override
      Widget build(BuildContext context) {
        return new Container(
          margin: new EdgeInsets.all(15.0),
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              new Container(
                height: 50.0,
                width: 50.0,
                child: new Center(
                  child: new Text(_item.buttonText,
                      style: new TextStyle(
                          color:
                              _item.isSelected ? Colors.white : Colors.black,
                          //fontWeight: FontWeight.bold,
                          fontSize: 18.0)),
                ),
                decoration: new BoxDecoration(
                  color: _item.isSelected
                      ? Colors.blueAccent
                      : Colors.transparent,
                  border: new Border.all(
                      width: 1.0,
                      color: _item.isSelected
                          ? Colors.blueAccent
                          : Colors.grey),
                  borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
                ),
              ),
              new Container(
                margin: new EdgeInsets.only(left: 10.0),
                child: new Text(_item.text),
              )
            ],
          ),
        );
      }
    }
    
    class RadioModel {
      bool isSelected;
      final String buttonText;
      final String text;
    
      RadioModel(this.isSelected, this.buttonText, this.text);
    }
    

    To use :

    void main() {
      runApp(new MaterialApp(
        home: new CustomRadio(),
      ));
    }
    

    Screenshot : enter image description here