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 for 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 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.

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

Here’s the complete example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Flutter Center Alignment Example',
        ),
      ),
      body: const 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 the 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.

const 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