How to align single widgets in Flutter?
FlutterDartAlignmentText AlignFlutter Problem Overview
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:
- https://stackoverflow.com/questions/50588508/align-text-widgets-on-a-in-a-row-widget
- https://stackoverflow.com/questions/50640161/flutter-right-align-not-working
This one is on the right track but I am trying to make a more cannonical question:
Flutter Solutions
Solution 1 - Flutter
#How to align widgets
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:
https://i.stack.imgur.com/K0ss3.png" width="300" alt="alignment">
where for any relative position (x,y)
Alignment.topLeft
isAlignment(-1.0, -1.0)
Alignment.topCenter
isAlignment(0.0, -1.0)
Alignment.topRight
isAlignment(1.0, -1.0)
Alignment.centerLeft
isAlignment(-1.0, 0.0)
Alignment.center
isAlignment(0.0, 0.0)
Alignment.centerRight
isAlignment(1.0, 0.0)
Alignment.bottomLeft
isAlignment(-1.0, 1.0)
Alignment.bottomCenter
isAlignment(0.0, 1.0)
Alignment.bottomRight
isAlignment(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"),
)
https://i.stack.imgur.com/umrVr.png" width="300" alt="alignment">
Supplemental code
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),
),
);
}
Solution 2 - Flutter
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: Text("widget"),
),
)