Mr. Tacio
Mr. Tacio

Reputation: 562

Unable to remove the padding in Expanded Widget

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.

Upvotes: 0

Views: 803

Answers (1)

Payam Asefi
Payam Asefi

Reputation: 2757

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');
        }),
  )

Upvotes: 1

Related Questions