Позиционирование / изменение размера виджета в зависимости от положения / размера другого виджета

Чтобы ответить на ваш исходный вопрос о макете, вы можете выполнить этот макет с помощью IntrinsicHeight виджет вместе с CrossAxisAlignment.stretch. Это выглядит так:

Вот код:

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

Чтобы реализовать более сложные примеры анимации, я бы рекомендовал использовать CustomMultiChildLayout для позиционирования коробки. См. демонстрацию анимации в Галерее для примера расширенная анимация с использованием этого класса:

• родитель - рост самых больших детей:

Вы можете использовать MainAxisSize.min в своей строке или столбце, он работает как обертка для родительских виджетов.

body: new Container(

 color: Colors.yellowAccent,

 child: new Row(

 mainAxisSize: MainAxisSize.min,

 children: [...],

 ),

)

• дочерние элементы с меньшей высотой, чтобы соответствовать родительскому:

FractionallySizedBox - это виджет (контейнер), и в соответствии с его widthFactor и heightFactor будут установлены все дочерние виджеты. Вы можете рассматривать это как своего рода масштабное значение. Итак, если мы хотим иметь контейнер, который занимает половину доступного пространства по горизонтали и вертикали, мы должны сделать следующее:

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

• дочерние элементы располагаются рядом друг с другом:

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

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