Responsive Layout with Flutter

Question

I'm having issue while making the dashboard for my WebApp. I'm trying to make my webApp responsive. But not able to make it. Here is the image with the code for what I tried.

import 'package:flutter/material.dart';

class MyHomeScreen extends StatefulWidget {
  const MyHomeScreen({super.key});

  @override
  State<MyHomeScreen> createState() => _MyHomeScreenState();
}

class _MyHomeScreenState extends State<MyHomeScreen> {
  List<Widget> customWidgetList = [
    Container(
      height: 100,
      width: 200,
      color: Colors.grey.shade200,
    ),
    Container(
      height: 300,
      width: 200,
      color: Colors.grey.shade200,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.grey.shade200,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.grey.shade200,
    ),
    Container(
      height: 200,
      width: 200,
      color: Colors.grey.shade200,
    ),
    Container(
      height: 100,
      width: 200,
      color: Colors.grey.shade200,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Responsiveness')),
      body: Wrap(
        spacing: 2.0,
        runSpacing: 2.0,
        clipBehavior: Clip.antiAlias,
        children: customWidgetList,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Result of above code :

Where as I want to fill all the empty spaces. Here is the image of what I want to do it.

Answer 1

Simple answer is to add direction: Axis.vertical to Wrap widget.

The correct answer is to create your own LayoutBuilder and calculate for each Container its correct position.

The easiest is to use https://pub.dev/packages/flutter_staggered_grid_view