How to remove gaps between widgets in a column?

Question

Hi I am trying to remove the space between some widgets in a Column, but I’m not sure how! Screenshot:screenshot

Code:

Column(
      children: [
        GestureDetector(
          onTap: () {},
          child: const Icon(Icons.arrow_drop_up_rounded, size: 80),
        ),
        SizedBox(
          width: 130,
          height: 75,
          child: TextField(
            textAlign: TextAlign.center,
            onChanged: (a) {},
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: const BorderSide(
                  width: 4,
                ),
                borderRadius: BorderRadius.circular(15),
              ),
              labelStyle: TextStyle(fontSize: 27),
              labelText: "text",
            ),
          ),
        ),
        GestureDetector(
          onTap: () {},
          child: const Icon(
            Icons.arrow_drop_down_rounded,
            size: 80,
          ),
        ),
      ],
    ),

There is a gap between the two icons which I want to reduce. Thanks in advance!

Answer 1

You could use a Stack and align its children accordingly, to get this result:

Code below:

SizedBox(
      height: 200,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              margin: const EdgeInsets.only(top: 15),
              child: GestureDetector(
                onTap: () {},
                child: const Icon(Icons.arrow_drop_up_rounded, size: 80),
              ) 
            ),
          ),  
          Center(
            child: SizedBox(
            width: 130,
            height: 50,
            child: TextField(
              textAlign: TextAlign.center,
              onChanged: (a) {},
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    width: 4,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
                labelStyle: TextStyle(fontSize: 27),
                labelText: "text",
              ),
            ),
          ) 
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.only(bottom: 15),
              child: GestureDetector(
                onTap: () {},
                child: const Icon(
                  Icons.arrow_drop_down_rounded,
                  size: 80,
                ),
              )
            ),
          )
        ],
      )
    )