Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - How to remove margin under GridView?

Tags:

flutter

dart

I get a strange margin under my GridView:

IOS example

This image is from an IOS simulator, here's how it looks on a smaller screen on Android where the margin appears to be gone or a lot smaller:

Android example

Here's the code:

Column(
  children: [
     GridView.count(
       shrinkWrap: true,
       crossAxisCount: 8,
       children: tiles
     ),
     Text('mamma')
  ]
)

Each element in the grid (tiles) is an EmptyTile widget:

class EmptyTile extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        border: Border.all(color: borderColor)
      )
    );
  }
}

I really can't figure out what this margin is or where it comes from, whether it has something to do with shrinkWrap or something else.

How can I remove this margin?

EDIT:

As requested here's the fullscreen images without the simplified example.

IOS:

IOS

Android:

Android

like image 340
Chrillewoodz Avatar asked Jul 11 '26 19:07

Chrillewoodz


1 Answers

Try this. by default it has padding and you should set padding to zero.

 GridView.builder(
   padding: EdgeInsets.all(0),
like image 148
Vahid Naghash Avatar answered Jul 13 '26 16:07

Vahid Naghash