Problems trying to implement this layout

Question

I'm trying to design the following layout using flutter for a website, but I can't figure out the right pattern for doing so.

I tried many possibilities with columns and rows; I tried also using a stack, but whatever I use, either 3-4 won't become scrollable, or 5 won't take the height that it's given. Is there a workaround for this layout to be implemented?

Answer 1

You can easily accomplish what you want using this library.

flutter_staggered_grid_view

If you want your layout to take up entire screen, key is to use percentages of screen height for mainAxisExtent of StaggeredGridTile.extent

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() async {

  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MaterialApp(
      home: AppView(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    var list = List<int>.generate(100, (i) => i);

    var height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: StaggeredGrid.count(
        crossAxisCount: 3,
        axisDirection: AxisDirection.down,
        mainAxisSpacing: height * 0.015,
        crossAxisSpacing: height * 0.015,
        children: [
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.amber,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 2,
            mainAxisExtent: height * 0.08,
            child: Container(
              color: Colors.red,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.675,
            child: Container(
              color: Colors.blue,
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * 0.81,
            // mainAxisCellCount: 1.2,
            child: Container(
              color: Colors.pink,
              child: ListView(
                children: list.map((e) => Text(e.toString())).toList(),
              ),
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 1,
            mainAxisExtent: height * .58,
            child: Container(
              color: Colors.orange,
              child: ListView(
                children: list.map((e) => Text(e.toString())).toList(),
              ),
            ),
          ),
          StaggeredGridTile.extent(
            crossAxisCellCount: 2,
            mainAxisExtent: height * .23,
            child: Container(
              color: Colors.teal,
            ),
          ),
        ],
      ),
    );
  }
}