如何在颤动中删除列或行中的小部件之间的空间？

Question

There is a gap between the two elements , how to eliminate them? sample code and effect screenshots are as follows ：

code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.red, // Color(0xFF275FF0),

          child: Column(
            // mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 5),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
])))
}

Answer 1

I did not notice those pixels before. To avoid that you should use ListView instead of Column .

Here is an example code with a similar code than yours.

    return Scaffold(
      body: SafeArea(
        child: ColoredBox(
          color: Colors.red,
          child: ListView(
            shrinkWrap: true,
            children: [
              const SizedBox(
                height: 5,
              ),
              Container(
                height: 100,
                color: Colors.white,
              ),
              Container(
                height: 200,
                color: Colors.white,
              ),
              Container(
                height: 300,
                color: Colors.white,
              )
            ],
          ),
        ),
      ),
    );

I also use ColoredBox as it is more optimized and specific than Container