I want to align a Flutter widget within its parent. I know that I can center a widget by wrapping it in a Center widget.
Center( child: Text("widget"), )
But how do I align it to the right, bottom, top middle, etc?
Notes:
I am talking about a single child, not multiple children in a Row or Column. See these SO questions:
This one is on the right track but I am trying to make a more cannonical question:
Align Widget is the widget that is used to align its child within itself and optionally sizes itself based on the child's size. Align Widget is quite flexible and can change its size according to the size of its child. Properties of Align Widget: alignment: It sets the alignment.
To align a child widget within its parent you use the Align
widget. If you know how to use the Center
widget then you are the right track because Center
is just a special case of Align
.
Wrap the widget you wish to align with the Align widget and set its alignment property. For example, this would align a text widget to the middle right of the parent.
Align( alignment: Alignment.centerRight, child: Text("widget"), )
Other options are
Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.bottomRight
Here is what that looks like:
You are not limited to these locations. You can align your widget anywhere. by specifying an x,y pair, where (0,0)
is the center of the view and the edges are 1.0
unit around it. Maybe an image would help:
where for any relative position (x,y)
Alignment.topLeft
is Alignment(-1.0, -1.0)
Alignment.topCenter
is Alignment(0.0, -1.0)
Alignment.topRight
is Alignment(1.0, -1.0)
Alignment.centerLeft
is Alignment(-1.0, 0.0)
Alignment.center
is Alignment(0.0, 0.0)
Alignment.centerRight
is Alignment(1.0, 0.0)
Alignment.bottomLeft
is Alignment(-1.0, 1.0)
Alignment.bottomCenter
is Alignment(0.0, 1.0)
Alignment.bottomRight
is Alignment(1.0, 1.0)
Notice in the image that the alignment (x,y)
doesn't need to be within the range [-1, +1]
. The alignment (1,2)
means it is at the right side of the widget and below the widget half again as much as its height.
Here is an example of a custom alignment position.
Align( alignment: Alignment(0.7, -0.5), child: Text("widget"), )
Here is the main.dart
code used to make the above examples for your cut-and-paste convenience.
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(), body: myLayoutWidget(), ), ); } } Widget myLayoutWidget() { return Align( alignment: Alignment(0.7, -0.5), child: Text( "widget", style: TextStyle(fontSize: 30), ), ); }
Expanded( child: Align( alignment: Alignment.centerRight, child: Text("widget"), ), )
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