Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between using Align or using Positioned flutter

Her's a concrete example of using both Positionned Widget and Align Widget! But I had a problem figuring what to use ! though original problem is to set some FABs's Offsets relatively to its Container not to the screen

Stack(
      children: <Widget>[
        Positioned(left: 0.0, child: Text("Top\nleft")),
        Positioned(bottom: 0.0, child: Text("Bottom\nleft")),
        Positioned(top: 0.0, right: 0.0, child: Text("Top\nright")),
        Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
        Positioned(bottom: 0.0, right: 0.0, child: Text("Bottom\nright")),
        Positioned(left: width / 2, top: height / 2, child: Text("Center")),
        Positioned(top: height / 2, child: Text("Center\nleft")),
        Positioned(top: height / 2, right: 0.0, child: Text("Center\nright")),
        Positioned(left: width / 2, child: Text("Center\ntop")),
        Positioned(left: width / 2, bottom: 0.0, child: Text("Center\nbottom")),
      ],
    )
    Example #2 (Using Align in Stack)

    Stack(
      children: <Widget>[
        Align(alignment: Alignment.center, child: Text("Center"),),
        Align(alignment: Alignment.topRight, child: Text("Top\nRight"),),
        Align(alignment: Alignment.centerRight, child: Text("Center\nRight"),),
        Align(alignment: Alignment.bottomRight, child: Text("Bottom\nRight"),),
        Align(alignment: Alignment.topLeft, child: Text("Top\nLeft"),),
        Align(alignment: Alignment.centerLeft, child: Text("Center\nLeft"),),
        Align(alignment: Alignment.bottomLeft, child: Text("Bottom\nLeft"),),
        Align(alignment: Alignment.topCenter, child: Text("Top\nCenter"),),
        Align(alignment: Alignment.bottomCenter, child: Text("Bottom\nCenter"),),
        Align(alignment: Alignment(0.0, 0.5), child: Text("Custom\nPostition", style: TextStyle(color: Colors.red, fontSize: 20.0, fontWeight: FontWeight.w800),),),
      ],
    );

> Blockquot

e

like image 634
said bendrioue Avatar asked Mar 11 '19 11:03

said bendrioue


2 Answers

  • Positioned is an offset based alignment which uses DP as unit
  • Align use a % of the parent size

As such, Alignment(0.1, 0.1) cannot be represented using a Positioned. And similarly,Align cannot represent a Positioned(top: 10, left: 10).

Secondly, Positioned is on a different flow.

Stack can size itself based on the size of one of its children excluding Positioned widgets.

As such, using an Align vs Positioned can result in Stack taking a different size.

like image 56
Rémi Rousselet Avatar answered Oct 21 '22 18:10

Rémi Rousselet


Positioned can only be used within a Stack and positions a child relative to the Stack size.

https://docs.flutter.io/flutter/widgets/Positioned-class.html

Align will be as big as possible within its parent (or a size relative to the children if heightFactor, widthFactor are passed) and positions its child relative to itself. Align can be used everywhere, not only within a Stack.

https://docs.flutter.io/flutter/widgets/Align-class.html

like image 26
Günter Zöchbauer Avatar answered Oct 21 '22 16:10

Günter Zöchbauer