101

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:

Jasmin Sojitra
  • 1,090
  • 10
  • 24
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393

3 Answers3

217

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:

enter image description here

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:

alignment

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"),
)

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),
    ),
  );
}
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
27
  Expanded(
    child: Align(
      alignment: Alignment.centerRight,
      child: Text("widget"),
    ),
  )
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
Brinda Rathod
  • 2,693
  • 1
  • 20
  • 32
  • 1
    I haven't tried this yet. What does the Expanded widget do here? – Suragch Jul 26 '19 at 15:27
  • 1
    `Expanded` will fill up all available space (and make any sibling widgets take up less space). It will place the child in the center of the newly created space, and you will need to use `Align` if you don't want it in the center (of the expanded space) – galki Sep 29 '19 at 08:32
  • 4
    This only works if your parent is either a `Column` or `Row`. – CopsOnRoad Dec 03 '19 at 10:30
  • 1
    @CopsOnRoad SizedBox.expand() can be used without Column or Row (flex) as parent. – dilshan Feb 24 '21 at 04:00
1

Flutter Align Widget also Flutter Animated Align

You can easily align any widget in flutter using the flutter Align widget.

Align(
      alignment: Alignment.center,
      child: Text(
        "ALIGN WIDGET",
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
      )),

also, you can animate it:

AnimatedAlign(
        alignment: clicked ? Alignment.bottomCenter : Alignment.topCenter,
        duration: const Duration(seconds: 2),
        child: const Text(
          "ANIMATED WIDGET",
          style: TextStyle(fontSize: 35, fontWeight: FontWeight.w800),
        )),
Jamiul Alam Rejon
  • 21
  • 4