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.topCenter | You 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.