CODEWITHSUNDEEP
flutter
Darkjeff
Darkjeff

Reputation: 427

How to change the padding of Radio or RadioListTile in flutter?

I am trying to do some ui customization, but I don't figure out how to reduce the padding of a Radio or RadioList in Flutter.

Can we do it ?

Upvotes: 12

Views: 22132

Answers (6)

Delowar Hossain
Delowar Hossain

Reputation: 924

Below Solution worked for RadioListTile. Although it hasn't remove the space between radio button and title but it looks good because it removes all sorrounding spaces.

Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          color: accentColor.withOpacity(0.45),
        ),
        child: RadioListTile(
          contentPadding: EdgeInsets.zero,
          visualDensity: const VisualDensity(
            horizontal: VisualDensity.minimumDensity,
            vertical: VisualDensity.minimumDensity,
          ),
          dense: true,
          title: Text('Male'),
          value: 'Male',
          groupValue: gender,
          onChanged: (value) {
            setState(() {
              gender = value;
            });
          },
        ),
      )

enter image description here

Upvotes: 0

lecaro
lecaro

Reputation: 525

this worked great for me...

RadioListTile(
  title: Transform.translate(
           offset: const Offset(-12, 0),
           child: Text(Text'),
         ),
         value: ... 
),

Upvotes: 2

Edryn Magcalas
Edryn Magcalas

Reputation: 601

set these Radio properties:

visualDensity: const VisualDensity(
  horizontal: VisualDensity.minimumDensity,
  vertical: VisualDensity.minimumDensity,
),

and

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

Upvotes: 50

Linton Caldecott
Linton Caldecott

Reputation: 459

Wrap the Radio widget in a SizedBox this allows you to control the padding around the Radio widget.

SizedBox(
    width: 20,
    height: 20,
    child: Radio(
         value: true,
         groupValue: _isSubscription,
         onChanged: (_) {
             setState(() {
                _isSubscription = true;
             });
         },
         // this no longer has any effect on the size
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         ),
    ),

Upvotes: 0

Chester Lee
Chester Lee

Reputation: 31

If you are using Radio, add property

visualDensity: VisualDensity(horizontal: x, vertical: y),

Where -4 <= x <= 4, and -4 <= y <= 4

Upvotes: 3

Doc
Doc

Reputation: 11651

If you are using RadioListTile then set dense to true.

If it's a Radio then materialTapTargetSize: MaterialTapTargetSize.shrinkWrap will reduce the size.

Otherwise, make your own.

Upvotes: 30

Related Questions