Position widget in stack with percent

Question

Let's say I want to position a widget inside a Stack but with a percent of the Stack position instead of a fixed size. How to do that in flutter ?

I'd expect that the Positionned.fromRelativeRect constructor would be the thing, using floats between 0 and 1. But seems like no.

Align allows to position the widget in percent. But heightFactor and widthFactor changes the Align size instead of the child size. Which is not what I want.

Answer 1

You can combine a Positioned.fill and LayoutBuilder to achieve such result.

    new Stack(
    children: <Widget>[
      new Positioned.fill(
        child: new LayoutBuilder(
          builder: (context, constraints) {
            return new Padding(
              padding: new EdgeInsets.only(top: constraints.biggest.height * .59, bottom: constraints.biggest.height * .31),
              child: new Text("toto", textAlign: TextAlign.center,),
            );
          },
        ),
      )
    ],
  ),

Answer 2

If you want to use LayoutBuilder then do without Positioned.fill, like this: you need one LayoutBuilder, no need to turn around every elements and use Transform.translate instead of Padding.

  new LayoutBuilder(
    builder: (context, constraints) {
      return Stack(
        children: <Widget>[
          Transform.translate(
            offset: Offset(
              constraints.biggest.width * left,
              constraints.biggest.height * top),         
            child: new Text("toto", textAlign: TextAlign.center,),
          ),
          ...
        ],
      );
    }
  )

Answer 3

one thing that i figured out not long ago is that you can position a widget on the screen using a container its alignment parameter with the help of the Alignment.lerp(x,y,z) function

//the widget will be placed in the center of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 0), 

//the widget will be placed in the bottom of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 1), 

//the widget will be placed in the bottom quarter of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, 0.5), 

//the widget will be placed in the top quarter of the container
alignment: Alignment.lerp(Alignment.topCenter, Alignment.bottomCenter, -0.5),