Staggered grid view for same size grid tiles

products_grid.dart

// Demo image: http://imgur.com/gallery/rkk9PgR
import 'package:flutter/material.dart';

import '../models/products.dart';
import './vertical_product_card.dart';

class ProductsGrid extends StatelessWidget {
  final List<Product> products;

  ProductsGrid(this.products);

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return GridView.builder(
      padding: const EdgeInsets.only(bottom: 30),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        childAspectRatio: screenWidth / (2 * 340), // Each grid tile will have a fixed height of 340
        crossAxisCount: 2, // 2-column grid view, so the width of each column equals to screenWidth / 2
      ),
      itemCount: products.length,
      itemBuilder: (_, i) {
        if (i % 2 == 0) {
          return VerticalProductCard(products[i]);
        }
        return OverflowBox(
          maxHeight: 390, // Equal to grid tile (340) plus top margin
          child: Container(
            margin: EdgeInsets.only(top: 50),
            child: VerticalProductCard(products[i]),
          ),
        );
      },
    );
  }
}