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
Positioned
is an offset based alignment which uses DP as unitAlign
use a % of the parent sizeAs 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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With