Problems trying to implement this layout - flutter

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