Im student new to flutter. Im creating a APP UI. Im struggling to add these radio buttons in my code. how do I add this kind of buttons using flutter. I watched YouTube videos and try code samples. but n0t work for me.

CodePudding user response：

Try this, and let us know it helps you.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
/// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  static const String _title = 'Radio Button Example';  
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: _title,  
      home: Scaffold(  
        appBar: AppBar(title: const Text(_title)),  
        body: Center(  
          child: MyStatefulWidget(),  
        ),  
      ),  
    );  
  }  
}  
  
enum BestTutorSite { javatpoint, w3schools, tutorialandexample }  
  
class MyStatefulWidget extends StatefulWidget {  
  MyStatefulWidget({Key key}) : super(key: key);  
  
  @override  
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();  
}  
  
class _MyStatefulWidgetState extends State<MyStatefulWidget> {  
  BestTutorSite _site = BestTutorSite.javatpoint;  
  
  Widget build(BuildContext context) {  
    return Column(  
      children: <Widget>[  
        ListTile(  
          title: const Text('www.javatpoint.com'),  
          leading: Radio(  
            value: BestTutorSite.javatpoint,  
            groupValue: _site,  
            onChanged: (BestTutorSite value) {  
              setState(() {  
                _site = value;  
              });  
            },  
          ),  
        ),  
        ListTile(  
          title: const Text('www.w3school.com'),  
          leading: Radio(  
            value: BestTutorSite.w3schools,  
            groupValue: _site,  
            onChanged: (BestTutorSite value) {  
              setState(() {  
                _site = value;  
              });  
            },  
          ),  
        ),  
        ListTile(  
          title: const Text('www.tutorialandexample.com'),  
          leading: Radio(  
            value: BestTutorSite.tutorialandexample,  
            groupValue: _site,  
            onChanged: (BestTutorSite value) {  
              setState(() {  
                _site = value;  
              });  
            },  
          ),  
        ),  
      ],  
    );  
  }  
}  

CodePudding user response：

You can create a custom radio button for this.

Here is full code for a similar one :

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(
            decoration: BoxDecoration(
                         border: Border.all(
                          color: Colors.red[500],
                               ),
                  borderRadius: BorderRadius.all(Radius.circular(20))
                ),
       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(),
                   ));
            }