title: Flutter Layout with Squares Only inside Variable-Height Containers
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>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).</p>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/LbYLA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LbYLA.png" alt="A Layout where the height is variable, but everything inside should be squared (one big square, with 2 small ones half its size on its right)"></a></p>
  
  <pre><code>return Container(
    child: AspectRatio(
      aspectRatio: 1.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: &lt;Widget&gt;[
          Expanded(
              flex: 7,
              child: Column(
                children: &lt;Widget&gt;[
                  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: &lt;Widget&gt;[
                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,
                  ),
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/wPUA3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wPUA3.png" alt="Above code has resulted in the actual items being non-squared"></a></p>