Positioning/Sizing a widget depending of the position/size of another widget

To answer your original layout question, you can accomplish this layout using the IntrinsicHeight widget together with CrossAxisAlignment.stretch. It looks like this:

Here's the code:

import 'package:flutter/material.dart';void main() {  runApp(new MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      home: new MyHomePage(),    );  }}class MyHomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new Scaffold(      body: new Padding(        padding: new EdgeInsets.all(10.0),        child: new IntrinsicHeight(          child: new Container(            color: Colors.grey,            padding: new EdgeInsets.all(4.0),            child: new Row(              mainAxisAlignment: MainAxisAlignment.start,              crossAxisAlignment: CrossAxisAlignment.stretch,              children: <Widget>[                new Container(                  padding: new EdgeInsets.all(5.0),                  margin: new EdgeInsets.only(right: 5.0),                  color: Colors.grey[200],                  child: new Column(                    crossAxisAlignment: CrossAxisAlignment.start,                    children: <Widget>[                      new Text('dynamic height'),                      new Text('dynamic width'),                      new Text('fat'),                      new Text('super fat'),                    ],                  ),                ),                new Container(                  padding: new EdgeInsets.all(5.0),                  color: Colors.grey[200],                  child: new Column(                    crossAxisAlignment: CrossAxisAlignment.start,                    children: <Widget>[                      new Text('dynamic width'),                      new Text('dynamic height'),                    ],                  ),                ),              ],            ),          ),        ),      ),    );  }}

To implement your more advanced animation examples, I would recommend using CustomMultiChildLayout to position the boxes. See the Gallery's animation demo for an example of advanced animation using this class:

• the parent takes the height of the biggest children :

You can use MainAxisSize.min in your row or column,  it works as wrap for parent widgets.

body: new Container( color: Colors.yellowAccent, child: new Row( mainAxisSize: MainAxisSize.min, children: [...], ),)

• children with a smaller height stretch to fit the parent :

FractionallySizedBox is a widget (a container) & according to it's widthFactor and a heightFactor, all the child widgets will be set. You can see this as a kind of scale value. So if we want to have a container that takes half of the available space horizontally and vertically, we would do the following:

@override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("FractionallySizedBox"),      ),      body: FractionallySizedBox(        widthFactor: 0.5,        heightFactor: 0.5,        child: Container(          // this container won't be larger than          // half of its parent size        ),      ),    );  }

• children are positioned right next to each other :

every flutter layout uses rows and columns when you want to position children right next to each other.   

Row(    children: [          YourWidget(),          YourWidget(),          YourWidget(),      ] )