How to remove space between two containers in Flutter?

问题

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

回答1:

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)".

回答2:

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),
        ),
      ),
    ],
  ),
);

来源：https://stackoverflow.com/questions/57283035/how-to-remove-space-between-two-containers-in-flutter

标签

Flutter

dart

flutter-layout