Flutter Layout with Squares Only inside Variable-Height Containers - flutter

Question

I want to try and create a layout of variable-height, but will take up the full width of the screen. I want 2 big squares on the left, with 2 little squares on the right of the squares as needed for each big square on the left. See the purple picture for details.
However, I can't seem to be able to do this where I guarantee the inner widgets and components will be squares. Is there a way to achieve this?
If this is possible, is it possible for me to also achieve the ability to drag and rearrange (scaling as I rotate the squares back and forth as well too)? I'm trying to achieve that type of layout and the ability to rotate from each one of the 6 pictures and it will scale correctly as needed in that aspect (or the ability to drag and drop to rearrange each of the pictures).
Help would be greatly appreciated! I showed what I did below, but it doesn't seem to work to even have square items inside of the variable-height container.
return Container(
child: AspectRatio(
aspectRatio: 1.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 7,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.grey,
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
),
),
],
)),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.orange,
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.red,
),
)
],
),
)
],
),
),
);

Answer 1

Please try this code. You should start from here. It is responsive, you just need to work more on the alignment when the screen is too small
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return FittedBox(
child: Center(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
child: Column(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 7,
child: _buildSquare(Colors.purple),
),
SizedBox(width: 12.0),
Expanded(
flex: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: _buildSquare(Colors.purple),
),
),
SizedBox(height: 12.0),
Expanded(
child: _buildSquare(Colors.purple),
),
],
),
),
],
),
),
SizedBox(height: 12.0),
Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 7,
child: _buildSquare(Colors.purple),
),
SizedBox(width: 12.0),
Expanded(
flex: 3,
child: Column(
children: [
Expanded(
child: _buildSquare(Colors.purple),
),
SizedBox(height: 12.0),
Expanded(
child: _buildSquare(Colors.purple),
),
],
),
),
],
),
),
],
),
),
),
);
}
Widget _buildSquare(Color color) {
return Center(
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
decoration: BoxDecoration(
color: color,
border: Border.all(color: Colors.black, width: 3.0)),
),
),
);
}
}