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.

flutter center align

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.

Align center left flutter

Alignment.centerRight

Align center right flutter

Alignment.topLeft

Align top left flutter

Alignment.topCenter

align top center flutter

Alignment.topRight

Align top left flutter

Alignment.bottomLeft

Align bottom left flutter

Alignment.bottomCenter

Align bottom center flutter

Alignment.bottomRight

Align bottom right flutter

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:

Flutter custom alignment

I hope this Flutter tutorial on alignment helped you!

Leave a Comment

Your email address will not be published. Required fields are marked *