'How to remove the gap between to widgets in a column?

I have a Column with two Containers. There is no padding, no margin. The sizes perfectly fit together. But still, I got this subpixel gap between widgets. It is visible on the simulator and real device.

gap

My code below:

       Column(
          children: [
            SizedBox(
              height: 57.0.h(context),
              width: MediaQuery.of(context).size.width,
              child: LayoutBuilder(
                builder: (context, constraints) => Column( // the column I actually am worried about
                  children: [
                    Container(
                      margin: EdgeInsets.zero,
                      padding: EdgeInsets.zero,
                      height: constraints.maxHeight * .45,
                      color: Theme.of(context).primaryColor,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          // here's some code
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.zero,
                      padding: EdgeInsets.zero,
                      height: constraints.maxHeight * .55,
                      color: Theme.of(context).primaryColor,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          // here's some code
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: PageView.builder(
                // here's some code
              ),
            ),
          ],
        ),

I've tried to make Container below Expanded (so to occupy ALL the remaining space) but nothing has changed.



Solution 1:[1]

Try adding Container's decoration with zero border width.

Container(
  height: constraints.maxHeight * .45,
  decoration: BoxDecoration(
    color: Theme.of(context).primaryColor,
    border: Border.all(
      // one or both
      color: Colors.transparent,
      width: 0.0,
    ),
  ),
.....

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yeasin Sheikh