How to change the radius of radio button

1,662

How about this?

leading: Transform.scale(
  scale: 2,
  child: Radio(
    value: options[ii],
    groupValue: defaultValue,
    onChanged: (String value) {
      setState(() {
        defaultValue = value;
      });
    },
  ),
),

enter image description here

Share:
1,662
Ojasv singh
Author by

Ojasv singh

Updated on December 16, 2022

Comments

  • Ojasv singh
    Ojasv singh over 1 year

    I am trying to make a radio button like in the picture image But I cannot change the radius of the radio button to this size. Is there any way to increase the size of the radio button?

    I have put the radio button on the card widget and changed the elevation of the card widget when the submit button is clicked. But I cannot change the size of the radiobutton. Here is the code which I tried

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      String question = 'Q 1', answer = 'A 3', defaultValue = 'nil';
      List<String> options = ['A 1', 'A 2', 'A 3', 'A 4'], info = ['', '', '', ''];
      List<double> elevationList = List.filled(4, 0.0);
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                ListTile(title: Text(question)),
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: options.length,
                  itemBuilder: (cc, ii) {
                    return Card(
                      elevation: elevationList[ii],
                      color: Colors.white,
                      child: ListTile(
                        title: Text(options[ii]),
                        subtitle: Text(info[ii]),
                        leading: Radio(
                          value: options[ii],
                          groupValue: defaultValue,
                          onChanged: (String value) {
                            setState(() {
                              defaultValue = value;
                            });
                          },
                        ),
                      ),
                    );
                  },
                ),
                RaisedButton(
                  onPressed: () {
                    if (defaultValue == answer) {
                      setState(() {
                        int ind = options.indexOf(defaultValue);
                        elevationList[ind] = 3.0;
                        info[ind] = 'Correct Answer !';
                      });
                    } else {
                      setState(() {
                        int wrongInd = options.indexOf(defaultValue);
                        info[wrongInd] = 'Wrong Answer !';
                        int correctInd = options.indexOf(answer);
                        elevationList[correctInd] = 3.0;
                        info[correctInd] = 'Correct Answer !';
                      });
                    }
                  },
                  child: Text('Submit'),
                )
              ],
            ),
          ),
        );
      }
    }
    
    
    • Naveen Avidi
      Naveen Avidi over 4 years
      Wrap the radio button inside the sizedbox and as usual create a sizes list like in your (my) answer ! And modify the value by selection. i.e. width = value,height = value...