https://api.flutter.dev/flutter/material/Radio-class.html
I copy/pasted the author radio button sample into my app and this is how it looks like:
My Code:
return Row(
children: <Widget>[
Expanded(child: ListTile(
title: const Text('Left radio button'),
leading: Radio(
value: SingingCharacter.lafayette,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
),),
Expanded(child: ListTile(
title: Text('right radio button'),
leading: Radio(
value: SingingCharacter.jefferson,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
),
)],
);
How can I remove the spaces/margins that I painted as red line on the image? I can not find these margins anywhere in my code...
The image was taken with Dart Dev Tools and "Select Widget Mode" was turned on that you can see the spaces around the elements radio and label.
Or is it just better to create my own radio button group... ? There is also still the problem that the radio can`t be selected with a clicked label...
If you look at the flutter\lib\src\material\list_tile.dart
you can find
static const double _horizontalTitleGap = 16.0;
So its basically hardcoded that 'The horizontal gap between the titles and the leading/trailing widgets'.
We cannot override this. But we can just use Row
in title
Try this,
Row(
children: <Widget>[
Expanded(
child: ListTile(
title: Row(
children: <Widget>[
Radio(
value: SingingCharacter.lafayette,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
const Text('Left radio button'),
],
),
),
),
Expanded(
child: ListTile(
title: Row(
children: <Widget>[
Radio(
value: SingingCharacter.jefferson,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
Text('right radio button'),
],
),
),
),
],
)