Here's what my UI looks like right now:
I can't seem to get the AD and BC Radio
buttons closer together. It looks like they are lined up with the top and bottom of the TextField
.
I've tried adjusting MainAxisAlignment
and CrossAxisAlignment
, and also adding a SizedBox
in between them. But they seem to always look like the picture shows.
Here is the code:
Row(
children: [
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
focusNode: inputNode,
autofocus: true,
keyboardType: const TextInputType.numberWithOptions(),
controller: yearController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Enter the Year",
),
),
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Radio<Era>(
value: Era.ad,
groupValue: _era,
onChanged: (Era? value) {
setState(() {
_era = value;
});
},
),
const Text(
'A.D.',
style: TextStyle(fontSize: 10.0),
),
],
),
Row(
children: [
Radio<Era>(
value: Era.bc,
groupValue: _era,
onChanged: (Era? value) {
setState(() {
_era = value;
});
},
),
const Text(
'B.C.',
style: TextStyle(fontSize: 10.0),
),
],
),
]))
]),
I was able to solve the spacing issue by wrapping each of the Radio
widgets in a SizedBox
and gave them a height lower than the devTools was showing me is their size (which was 48). I gave them a height of 30 and it works.
Here's a pic:
And here's the code:
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
SizedBox(
height: 30,
child: Radio<Era>(
value: Era.ad,
groupValue: _era,
onChanged: (Era? value) {
setState(() {
_era = value;
});
},
),
),
const Text(
'A.D.',
style: TextStyle(fontSize: 10.0),
),
],
),
Row(
children: [
SizedBox(
height: 30,
child: Radio<Era>(
value: Era.bc,
groupValue: _era,
onChanged: (Era? value) {
setState(() {
_era = value;
});
},
),
),
const Text(
'B.C.',
style: TextStyle(fontSize: 10.0),
),
],
),
]),
)
]),