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,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

Use this

  Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          height: (MediaQuery.of(context).size.height) / 2,
          child: Stack(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 2,
                    child: Column(
                      children: [
                        Container(
                            margin: EdgeInsets.all(4),
                            width: double.infinity,
                            height: (MediaQuery.of(context).size.height) / 8,
                            child: SizedBox(
                              height: 1,
                              width: 1,
                              child: const ColoredBox(color: Colors.amber),
                            )),
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Expanded(
                              flex: 2,
                              child: Container(
                                  margin: EdgeInsets.all(4),
                                  height:
                                      (MediaQuery.of(context).size.height) / 3,
                                  child: SizedBox(
                                    height: 1,
                                    width: 1,
                                    child:
                                        const ColoredBox(color: Colors.amber),
                                  )),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                  margin: EdgeInsets.all(4),
                                  height: (MediaQuery.of(context).size.height) /
                                      7.5,
                                  child: SizedBox(
                                    height: 1,
                                    width: 1,
                                    child:
                                        const ColoredBox(color: Colors.amber),
                                  )),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                        margin: EdgeInsets.all(4),
                        height: ((MediaQuery.of(context).size.height) / 4) + 12,
                        child: SizedBox(
                          height: 1,
                          width: 1,
                          child: const ColoredBox(color: Colors.amber),
                        )),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.bottomRight,
                child: Container(
                    padding: EdgeInsets.only(bottom: 20),
                    margin: EdgeInsets.all(4),
                    width: (MediaQuery.of(context).size.height) / 3.8,
                    height: (MediaQuery.of(context).size.height) / 5,
                    child: SizedBox(
                      height: 1,
                      width: 1,
                      child: const ColoredBox(color: Colors.amber),
                    )),
              )
            ],
          ),
        ),
      ),

Answer 3

There is a github project for design a responsive screen.

The github link Flutter-Responsive-Admin-Panel-or-Dashboard