Staggered gird view tiles with different accept ratio in flutter web

Question

I am trying to achieve the following grid layout in Flutter using staggered grid view

but i am not able to change the accept ratio. The height of the gird is according to the width.

this is the code i am using

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      builder: (controller) => Container(
        color: AppColors.doveGray,
        padding: const EdgeInsets.fromLTRB(100, 20, 100, 20),
        child: Scaffold(
          appBar: const CustomAppBar(isPhone: false),
          backgroundColor: AppColors.doveGray,
          body: Container(
            height: MediaQuery.of(context).size.height * .75,
            child: GridView.custom(
              shrinkWrap: true,
              gridDelegate: SliverQuiltedGridDelegate(
                crossAxisCount: 4,
                mainAxisSpacing: 20,
                crossAxisSpacing: 20,
                repeatPattern: QuiltedGridRepeatPattern.mirrored,
                pattern: [
                  QuiltedGridTile(2, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                  QuiltedGridTile(1, 1),
                ],
              ),
              childrenDelegate: SliverChildBuilderDelegate(
                  (context, index) => HomeTileWidget(),
                  childCount: 9),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

The crossAxisCount:9 will dominate the UI. Change sh value based on need

const sh = 2;
return Scaffold(
  body: GridView.custom(
    gridDelegate: SliverQuiltedGridDelegate(
      crossAxisCount: 9,
      mainAxisSpacing: 20,
      crossAxisSpacing: 20,
      repeatPattern: QuiltedGridRepeatPattern.mirrored,
      pattern: [
        QuiltedGridTile(sh * 2, 3),
        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 3), //topE
        
        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 3),

        QuiltedGridTile(sh, 3),
        QuiltedGridTile(sh, 2),
        QuiltedGridTile(sh, 2),
        QuiltedGridTile(sh, 2),
      ],
    ),

Play with decoration.