Unable to remove the padding in Expanded Widget

February 11, 2022

I can’t seem to find why after the first Text Widget, there is a big gap of space. I didn’t put any Padding or SizedBox but somehow, the Expanded seem to have its own padding. Please help on how can I adjust that space in between the text and numbers. Thanks!

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Text'),
        Expanded(
          child: GridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, childAspectRatio: 5 / 1),
              itemCount: 6,
              itemBuilder: (BuildContext ctx, index) {
                return Text('$index');
              }),
        ),
      ],
    );
  }

Output:

Text

0     1     2
3     4     5

Expected output:

Text
0     1     2
3     4     5

Note: This is the minimized code in order to show the essential.

>Solution :

Change your GridView.builder to this:

  Expanded(
    child: GridView.builder(
      padding: const EdgeInsets.only(top: 0),
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, childAspectRatio: 5 / 1),
        itemCount: 6,
        itemBuilder: (BuildContext ctx, index) {
          return Text('$index');
        }),
  )