Flutter 列显示 Android 中小部件之间的额外空间

Question

Column widget is showing extra space between consecutive widgets even when using simple containers with their padding set to 0. I have tried using SizedBox, setting mainAxisSize to min but nothing seems to be working. Moreover this issue is only appearing in Android OS and not on Web or iOS.

My Code:

Scaffold(
  backgroundColor: Colors.yellow,
  appBar: AppBar(
    title: Text(title),
  ),
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.zero,
          height: 50,
          color: Colors.black,
        ),
        Container(
          padding: EdgeInsets.zero,
          height: 100,
          color: Colors.black,
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          height: 150,
          color: Colors.black,
        )
      ],
    ),
  ),
)

Output:

I have zoomed the image a bit to on the right to display the gap better. There is a line of space appearing between the 2 containers. I have placed another container of 150 height below the column to show the difference between complete opaque and space. I have recreated this same behaviour on Pixel 3 Emulator as well as OnePlus 6T device.

Can anybody help me with a fix to this. I know this can be solved using Stack and Positioned but I was hoping to find out if this is an issue in Flutter SDK or a fixable widget behaviour.

Answer 1

That's a pretty annoying effect indeed. And though I can't tell you why this is happening, playing around with it a bit, it seems that giving the Container a BoxDecoration with a Border instead of a color removes the artifacts:

Scaffold(
  backgroundColor: Colors.yellow,
  appBar: AppBar(
    title: Text('title'),
  ),
  body: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          padding: EdgeInsets.zero,
          height: 51,
          //color: Colors.black,
        ),
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          padding: EdgeInsets.zero,
          height: 100,
        ),
        Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
            color: Colors.black,
          ),
          height: 150,
          //color: Colors.black,
        )
      ],
    ),
  ),
)

Answer 2

For me answer didn't work (probably because i had clipPath over container but i found similar solution)

decoration: BoxDecoration(
    border: Border.all(width: 0, color: Colors.yourColor),
    color:  Colors.yourColor,
),

In all containers at your column