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?

score 16 · Answer 1 · answered Sep 05 '17 at 03:54

16

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:

answered Sep 05 '17 at 03:54

Collin Jackson

110,240
31
221
152

Ah cool, didn't know you could use `IntrinsicHeight` like that. On the other hand, for the animations I showed, `CustomChildLayout` won't work. Not only CustomChildLayout's size can't depdends on children ; but it still won't solve the problem of accessing world position/size of a global widget. – Rémi Rousselet Sep 05 '17 at 14:05
You are asking a lot of questions and I think you should probably consider splitting them into their own Stack Overflow questions. If you're using `MultiChildLayoutDelegate` the size of your widget is provided to you in `performLayout`. You can determine the size of your children by calling `layoutChild`. If you want to get the global coordinates of your `renderObject` you can use [`localToGlobal`](https://docs.flutter.io/flutter/rendering/RenderBox/localToGlobal.html) although if you're doing this you're probably violating encapsulation and should implement the custom layout at a higher level – Collin Jackson Sep 06 '17 at 03:37
Note that for simple use cases, your can use `LayoutBuilder` to get the size constraints surrounding a widget. You won't need this if you're implementing `MultiChildLayoutDelegate`, though. – Collin Jackson Sep 06 '17 at 03:38
Thanks but like I said, MultiChildLayout (aka CustomChildlayout) won't work. While you can get the children size inside `performLayout`, you won't be able to access to their size inside `getSize`. – Rémi Rousselet Sep 06 '17 at 08:53
It _is_ a violation of encapsulation. But there are no other solution for some animation, such as a Hero like. Let's say you want to translate visually an image inside the Scaffold body, to a cart icon inside the Scaffold AppBar. You don't have the choice. – Rémi Rousselet Sep 06 '17 at 08:56
I would wrap the Scaffold in a Stack if you want to achieve that effect. That way you have full control over the positioning of the elements that appear on top of the Scaffold. – Collin Jackson Sep 06 '17 at 16:31
If you run up against limitations of what you can do with existing box and sliver widgets, another option is to pop down a layer and implement custom logic at the render tree level. This will involve writing more code but it will give you more fine grained control over things. – Collin Jackson Sep 06 '17 at 16:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153805/discussion-between-darky-and-collin-jackson). – Rémi Rousselet Sep 06 '17 at 18:00

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

1 Answers1

Linked