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?
To answer your original layout question, you can accomplish this layout using the
IntrinsicHeight
widget together withCrossAxisAlignment.stretch
. It looks like this:Here's the code:
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: