How to Align Widgets in Flutter

Proper alignment is an important aspect of a beautiful user interface. When the components are aligned properly, users can easily assess different options of your apps. In this blog post, let’s check how to align widgets in Flutter.

The Align widget and the Alignment property are used to do align child widgets in Flutter. The Alignment property defines the coordinates to align the child. The following snippet aligns the Text widget centrally with respect to the parent.

Align(
        alignment: Alignment.center,
        child:Text(
        "Align Me!",
        style: TextStyle(
        fontSize: 30.0
      ),
      ),
      ),  

Here’s the complete example:

import 'package:flutter/material.dart';

class CenterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Center Alignment Example'),
      ),
      body: Center(child:Container(
      color: Colors.white,
      
      child: Align(
        alignment: Alignment.center,
        child:Text(
        "Align Me!",
        style: TextStyle(
        fontSize: 30.0
      ),
      ),
      ),  
      ),
      ),
    );
  }
}

And the output will be as given below.

You can align to different positions by changing the value of alignment property. If Alignment.center is replaced with Alignment.centerLeft you will get the following output.

Alignment.centerRight

Alignment.topLeft

Alignment.topCenter

Alignment.topRight

Alignment.bottomLeft

Alignment.bottomCenter

Alignment.bottomRight

You can also align child widgets by defining custom coordinate points.

Align(
        alignment: Alignment(0.5, 0.5),
        child:Text(
        "Align Me!",
        style: TextStyle(
        fontSize: 30.0
      ),
      ),
      ),

And here’s the output:

I hope this Flutter tutorial on alignment helped you!