Remove space between rows in a Column Flutter

Question

I'm working on a project where I need to minimize the vertical space between each row within a column. My goal is to make the layout as compact as possible, specifically by reducing the space below the price and the name fields. However, I've been struggling to achieve this. I want to remove the space indicated by the arrows and that the TextField and the price are aligned

Widget articleInfo(String articleName, String price, int quantity, int index) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      color: Color.fromARGB(59, 196, 191, 191)),
    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
    child: Column(
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Text(
                  articleName,
                  style: const TextStyle(fontSize: 16, color: Color(0xff181e40)),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: Text("Price"),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(bottom: 25),
                child: TextField(
                  controller: priceEditingControllers[index],
                  decoration: InputDecoration(
                    hintText: price,
                    labelStyle: TextStyle(color: Color(0xff181e40)),
                    hintStyle: TextStyle(color: Color(0xff181e40)),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xff181e40), width: 1.0),
                    ),
                    contentPadding: EdgeInsets.only(bottom: -30),
                  ),
                  style: TextStyle(color: Color(0xff181e40)),
                  textAlign: TextAlign.center,
                  keyboardType: TextInputType.number,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 4,
              child: Row(
                children: [
                  IconButton(
                    padding: EdgeInsets.all(0),
                    icon: Icon(Icons.remove_circle, color: Color(0xff181e40), size: 20),
                    onPressed: () {},
                  ),
                  Text(
                    quantities[index].toString(),
                    style: TextStyle(color: Color(0xff181e40)),
                  ),
                  IconButton(
                    padding: EdgeInsets.all(0),
                    icon: Icon(Icons.add_circle, color: Color(0xff181e40), size: 20),
                    onPressed: () {},
                  ),
                  Expanded(
                    child: Align(
                      child: IconButton(
                        padding: EdgeInsets.zero,
                        alignment: Alignment.centerLeft,
                        icon: Icon(Icons.mode_edit_outline, size: 20),
                        onPressed: () {},
                        
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

I try height Container, mainAxisSize in a column and mainAxisSize in the rows

Answer 1

There is no space between the rows, you can verify it by wrapping each row with a Container and give it some colors. The space is from the TextField and the IconButton.

To remove the extra spaces from the TextField, set isDense: true in its InputDecoration.

TextField(
  decoration: InputDecoration(
    isDense: true,
    // ...
  ),
  // ...
)

To reduce the spaces around the IconButton, you can set visualDensity: VisualDensity.compact.

IconButton(
  visualDensity: VisualDensity.compact,
  // ...
)

If you want to reduce it even further, you can set tapTargetSize: MaterialTapTargetSize.shrinkWrap in its ButtonStyle:

IconButton(
  style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
  // ...
)

Please note that removing spaces around a button is generally discouraged since it defeats the purpose of the Material guidelines that encourages spaces around button for better user experience.