Flutter column shows extra space between widgets in Android
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,
)
],
),
),
)
Parichit
Programming enthusiast, loves to learn new languages. Currently been working on MEAN Stack development but that's what I do, what I am is not something of a computer geek but more of a gamer, cook and friend. So basically just an_average guy.
Updated on December 24, 2022Comments
-
Parichit over 1 year
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, ) ], ), ), )
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.
-
kazume over 3 yearsFeels like a bug to me to be honest, posted a possible work-around below.
-