3

I'm making a very simple Grid, basically 9 squares, and I set the padding to EdgeInsets.zero (or EdgeInsets.all(0)) and sometimes, depending on the window's size, it shows a padding, or not.

I'm testing it on chrome and linux (fedora plasma, and fedora i3wm) and the error is consistent.

The images bellow share the same code, I just resized the window slightly

Image with paddings/gaps

Image without paddings/gaps

Here's the code

import 'package:flutter/material.dart';

void main(){
    runApp(MaterialApp(home: myApp));

}

// display 9 squares
Widget myApp = GridView.count(
    crossAxisCount: 3,
    padding: EdgeInsets.zero,
    children: [
        Square(),
        Square(),
        Square(),

        Square(),
        Square(),
        Square(),

        Square(),
        Square(),
        Square(),
    ],
);

// simple red colored square
class Square extends StatelessWidget {
    Color color = Colors.red;
    Square({super.key});

    @override
    Widget build(BuildContext context){
        return Container(
            color: color,
            padding: EdgeInsets.zero,
        );
    }
}
jbbc
  • 31
  • 2
  • 1
    Might be a bug in the graphics rendering engine? Have you tried to run your app in release mode and see if there is a difference? – jraufeisen Nov 17 '22 at 00:38
  • @jraufeisen Yes, I'd already tried it on release mode! it does seem to be a bug, or maybe an unintended behaviour, or not so obvious, I'll report it to the flutter team, although the culprit seems to be MaterialApp!, thank you – jbbc Nov 17 '22 at 01:24
  • does the behavior occur when each Square() has different color? – Dung Ngo Nov 17 '22 at 02:13
  • @DungNgo yes, it does, I use the same color because it's easier to see – jbbc Nov 17 '22 at 02:17
  • 1
    this seems to be related to these issues on github: [here](https://github.com/flutter/flutter/issues/29702#issuecomment-475302860) and [here](https://github.com/flutter/flutter/issues/14288#issuecomment-1317936107) about anti-aliasing and logical pixels. You can follow those to find out about work around. – Dung Ngo Nov 17 '22 at 02:53

1 Answers1

1

flutter is cross-platform framework, which help to build apps with single codebase. But, the challenge is how to make the app adaptive for each platform.

You might read this documentation for full explanation: https://docs.flutter.dev/development/ui/layout/building-adaptive-apps

there many considerations, and you said that its show padding depending window size, which is one of the documentaion mentioned here: https://docs.flutter.dev/development/ui/layout/building-adaptive-apps#building-adaptive-layouts

im not explore yet, but thats my hypothesis. hope it guide you to solve the issue

enter image description here

pmatatias
  • 3,491
  • 3
  • 10
  • 30