Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove internal padding on a RadioListTile so I can use 3 RadioListTiles in a row?

I am pretty new to Flutter and Dart and I can't seem to find any hints for this particular topic. I am trying to put 3 RadioListTiles in a Row like so:

Row(
        children: [
          Expanded(
            child:RadioListTile<GoalSelection>(
              title: Text(
                'Net',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.net,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
          Expanded(
            child: RadioListTile<GoalSelection>(
              title: Text(
                'Gross',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.gross,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
          Expanded(
            child: RadioListTile<GoalSelection>(
              title: Text(
                'Salary',
                style: Theme.of(context).textTheme.body1,
              ),
              value: GoalSelection.salary,
              groupValue: _goalSelection,
              onChanged: (GoalSelection value) {
                setState(() {
                  _goalSelection = value;
                });
              },
            ),
          ),
        ],
      ),

The buttons layout fine, but there seems to be a lot of wasted space for the label. I put a screenshot of what it currently looks like below. I have tried wrapping the Expanded, the RadioListTile, and the Text in Padding widgets (all one at a time) to manually set the padding to 0, but it didn't do anything. I have also tried to change Expanded to Flexible even though I didn't think that would change anything. I am at a loss now. Is there any way to get this layout to work? I am kind of assuming it is something really dumb that I am doing.

Layout inspector showing padding

like image 873
Jason Toms Avatar asked May 13 '18 14:05

Jason Toms


People also ask

How do you get rid of the extra padding on a radio button flutter?

To remove the padding you can put the Radio as a child of a SizedBox . eg:- SizedBox(height: 20, width: 20, child: Radio(.......))

How do I remove padding from a list tile?

You can use the visualDensity property to reduce the space. ListTile( visualDensity: VisualDensity(horizontal: 0, vertical: -4), title: Text("xyz") ); The visualDensity value can be changed from -4.0 to 4.0. Lower the value, more compact the view.

How do you remove padding between leading and title in ListTile flutter?

As Dinesh has pointed out here, ListTile has received a minLeadingWidth property. Default value is 40 , so to reduce space between leading and title by x pass minLeadingWidth: 40 - x .

How do I reduce the space between radio buttons in flutter?

The easiest way to achieve this is by wrapping the Radio without any padding, in a Container and then setting your custom Margin and Padding as(if) required.


1 Answers

RadioListTile is used with the purpose of taking the full width in a vertical scroll list.

If you don't want this behavior, don't use it. Use Radio instead.

like image 104
Rémi Rousselet Avatar answered Oct 13 '22 12:10

Rémi Rousselet