Flutter Column: set fixed space between items

Issue

It seems I cannot change the space between items in GridView:

Scaffold(
  body: SingleChildScrollView(
    physics: BouncingScrollPhysics(),
    child: Padding(
      padding: const EdgeInsets.all(15),
      child: Column(
        children: [
          HorizontalListView(widgetItems: [
            PillCell(),
            PillCell(),
            PillCell(),
            PillCell(),
            PillCell(),
            PillCell(),
            PillCell(),
            PillCell()
          ], height: 30),

          GridView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            physics: ScrollPhysics(),
            padding: EdgeInsets.zero,
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 500,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemCount: itemsCount,
            itemBuilder: (context, index) {
              return WideMediaCard();
            },
          )

        ],
      ),
    ),
  ),
),

and here is my WideMediaCard:

class WideMediaCard extends StatelessWidget {
  const WideMediaCard({Key? key, this.text, this.cover, this.onTap}) : super(key: key);

  final String? text;
  final String? cover;
  final Future? Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 0.7,
      child: Container(
        color: Colors.amber,
      ),
    );
  }
}

I want that this widget's height set to 0.7 of its width, that's why I used FractionallySizedBox. I want to set that large gap to 20 points but I cannot figure it out.

Now this is the result:

Solution

GirdView item's size depend on childAspectRatio. On gridDelegate use childAspectRatio: 1 / .7, and remove FractionallySizedBox from WideMediaCard.

GirdView gridDelegate will be

  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 500,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 1 / .7,
                ),

and WideMediaCard will be

class WideMediaCard extends StatelessWidget {
  const WideMediaCard({Key? key, this.text, this.cover, this.onTap})
      : super(key: key);

  final String? text;
  final String? cover;
  final Future? Function()? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
    );
  }
}

Answered By - Yeasin Sheikh