Align in Flutter

18-Sep-2024

Learn how to control the alignment of widgets using the Align widget in Flutter

The Align widget, like the Center widget, is used to align  child elements within the available space.
However, unlike Center, Align gives you more control over the position of child widgets, allowing you to set different alignments within the parent widget.

There Are Some Common Attributes for Align

Alignment.topLeft
You can set widget in Top Left
Alignment.topCenterYou can set widget in Top Center
Alignment.topRight
You can set widget in Top Right
Alignment.centerLeft
You can set widget in Center Left
Alignment.centerRight
You can set widget in Center Right
Alignment.center
You can set widget in Center
Alignment.bottomLeft
You can set widget in Bottom Left
Alignment.bottomCenter
You can set widget in Bottom Center
Alignment.bottomRight
You can set widget in Bottom Right

Here's a simple example of using a Column in Flutter:

File open lib->main.dart file −



import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('Align Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body: MyApp(),
),
)
);
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return
Align(
//alignment: Alignment(0.5,-0.5),
alignment: Alignment.topRight,
child:
Text("Micro Tutorial",
style:TextStyle(fontSize: 20,color: Colors.red),
)
);
}
}



Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.


Output:


Comments