This is how the gaps look like
awkward gaps
I want to remove the gaps.
The image I attached is from a pop-up modal, and here’s how the content look like:
Container(
height: MediaQuery.of(context).size.height * 0.67,
width: MediaQuery.of(context).size.width * 0.50,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(
child: Text("Kode Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmkKode,
),
),
),
const Expanded(
child: Text("Kriteria",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmkKriteria,
),
),
),
const Expanded(
child: Text("Grup Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmiGroupIndikator,
),
),
),
const Expanded(
child: Text("Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmiIndikator,
),
),
),
],),
Column(
children: const [
Expanded(
child: Text("Kode Indikator",style: TextStyle(fontSize: 12),),
)
],),
]
)
)
I’ll appreciate it if you can also help me on layouting tips, as I’m still new with Flutter and how to make this layout with the gaps between textfield-text instead of text-textfield right now. I think I’ve been using Expanded and Flexible wrongly but I don’t know exactly.
I tried using Stack widget, but ended up with the elements on top of each other.
EDIT:
Ok so after more trying, I figured out it’s because of the Expanded taking up as many space as possible. When I changed Expanded to SizedBox it finally looked like what I wanted.
But I still want to know if it’s possible to do it without SizedBox, as I hard-coded the height..
2
Answers
The gaps are there because you use
Expanded
.Expanded
makes it that all available space gets divided between all theExpanded
in theColumn
. Just useText
directly without wrapping them inExpanded
Please remove expanded Widget and remove gap.
Like this