Схема развевания с квадратами только внутри контейнеров с переменной высотой

Question

Я хочу попробовать создать макет переменной высоты, но он будет занимать всю ширину экрана. Я хочу 2 больших квадрата слева, и 2 маленьких квадрата справа от квадратов, необходимых для каждого большого квадрата слева. Подробности смотрите на фиолетовом рисунке.

Однако я не могу этого сделать, поскольку я гарантирую, что внутренние виджеты и компоненты будут квадратными. Есть ли способ достичь этого?

Если это возможно, могу ли я также достичь способности перетаскивать и переставлять (масштабирование, когда я тоже вращаю квадраты вперед-назад)? Я пытаюсь добиться такого типа макета и возможности поворота от каждого из 6 изображений, и он будет корректно масштабироваться по мере необходимости в этом аспекте (или возможности перетаскивания для изменения расположения каждого из изображений).

Помощь будет принята с благодарностью! Я показал то, что сделал ниже, но, похоже, даже квадратные элементы внутри контейнера переменной высоты не работают.

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

Пожалуйста, попробуйте этот код. Вы должны начать отсюда. Он отзывчивый, вам просто нужно больше работать над выравниванием, когда экран слишком маленький

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