skip to Main Content

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


  1. The gaps are there because you use Expanded. Expanded makes it that all available space gets divided between all the Expanded in the Column. Just use Text directly without wrapping them in Expanded

    Login or Signup to reply.
  2. Please remove expanded Widget and remove gap.
    Like this

    Container(
          child: Row(mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "Kode Indikator",
              style: TextStyle(fontSize: 12),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.25,
              height: 40,
              child: const TextField(
                readOnly: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  labelText: 'a',
                ),
              ),
            ),
            const Text(
              "Kriteria",
              style: TextStyle(fontSize: 12),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.25,
              height: 40,
              child: const TextField(
                readOnly: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  labelText: 'a',
                ),
              ),
            ),
            Text(
              "Grup Indikator",
              style: TextStyle(fontSize: 12),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.25,
              height: 40,
              child: const TextField(
                readOnly: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  labelText: 'b',
                ),
              ),
            ),
            Text(
              "Indikator",
              style: TextStyle(fontSize: 12),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.25,
              height: 40,
              child: const TextField(
                readOnly: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  labelText: 'c',
                ),
              ),
            ),
          ],
        ),
        const Column(
          children: [
            Text(
              "Kode Indikator",
              style: TextStyle(fontSize: 12),
            )
          ],
        ),
      ]))
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search