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

Question

I faced a few times already a quite big wall in Flutter. Animating or building widgets, that depends on other widgets to get their size/position.

A few examples of what could be my worst nightmares in a flutter : Snaping widgets next to each other dynamically. In css we'd have this :

.root {
    display: flex;
    background: grey;
    padding: 4px;
}
.root > div {
  background: lightgrey;
  margin-right: 5px;
  padding: 5px;
}

<div class="root">
    <div>
         dynamic height
         <br/>
         dynamic width
         <br/>
         fat
         <br/>
         super fat
    </div>
    <div>
         dynamic width
         <br/>
         dynamic height
    </div>
</div>

• the parent takes the full width (not important).
• the parent takes the height of the biggest children.
• children with a smaller height stretch to fit the parent
• children are positioned right next to each other

In flutter, I don't think we can have all 4 points at once.

And now what if we have 2 of this list and an animation where one element goes from one list to the other one? example

Another example. What if we wanted to have a SlideTransition that finish vertically aligned with another widget that has nothing in common? Like this :

These are totally random examples. I don't need to reproduce the same thing. The real question here is: Is there a generic way to do something similar (get the screen size/position)? Something that will not be specific for this use case and will be easily maintainable later?

Answer 1

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: