How to remove space between two containers in Flutter? - flutter

Question

I have two Containers of height 250 inside Column widget. There is no any other widget present between this two Container widget but still I can see very little space between two containers.
Here's my code...
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Example(),
);
}
}
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
double height = 250;
TextStyle containerTextStyle = TextStyle(color: Colors.white, fontSize: 24);
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
color: Colors.black,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);
}
}
I don't know why but if I set the height of this containers to 100 or 400 it is not showing any space between container. Did not try with many different values for height but space is visible for some value and not visible for other value.
Here's the screenshot from my phone...
Both Containers height is equal to 250
Both Containers height is equal to 400

Answer 1

Replace your scaffold with this:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
height: height,
decoration: BoxDecoration(
border: Border.all(width: 0, color: Colors.black),
color: Colors.black,
),
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
],
),
);

Answer 2

As #sukhi said,
You need to use the BoxDecoration in your Container.
But Rather than giving border Color you can simple set width of border to 0.
Like Below:
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 1', style: containerTextStyle),
),
),
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(width: 0),
),
height: height,
child: Center(
child: Text('Container 2', style: containerTextStyle),
),
),
And Do not forget to give your color inside BoxDecoration instead of Container itself else it will throw an error.
Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

Answer 3

A bit late, but currently seems to be an open Flutter issue. My solution was similar to other answers, but as the color in my case had opacity, I had to wrap the problematic container with another container, and add the decoration to the parent container:
decoration: BoxDecoration(
color: Colors.black, //the color of the main container
border: Border.all(
//apply border to only that side where the line is appearing i.e. top | bottom | right | left.
width: 2.0, //depends on the width of the unintended line
color: Colors.black,
),
),
As suggested from https://github.com/flutter/flutter/issues/14288#issuecomment-668795963