How to remove space between two containers in 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),
        ),
      ),
    ],
  ),
);