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.
To remove the padding you can put the Radio as a child of a SizedBox . eg:- SizedBox(height: 20, width: 20, child: Radio(.......))
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.
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 .
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With