Align Widget in Flutter Last Updated : 03 Jun, 2021 Comments Improve Suggest changes Like Article Like Report Align Widget is the widget that is used to align its child within itself and optionally sizes itself based on the child's size. Align Widget is quite flexible and can change its size according to the size of its child. Constructor of Align class: Syntax: Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child})Properties of Align Widget: alignment: It sets the alignment.child: The child widget in the tree.hashCode: The hashcode for the object.heightFactor: It sets its height to the child's height multiplied by this heightFactor.key: It is used to controlling how one widget replaces the other one.runtimeType: It is a representation of runtime type.widthFactor: It sets its width to the child's width multiplied by this widthFactor.Example 1: Aligning the text at the center of the container. The main.dart file: Dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'TextSpan', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(), debugShowCheckedModeBanner: false, ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('GeeksforGeeks Align Widget'), backgroundColor: Colors.green), body: Center( child: Container( height: 120.0, width: 120.0, color: Colors.blue[50], child: Align( alignment: Alignment.center, child: Text( "Geeky Text", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), ), ))); } } Output: Example 2: Aligning the Image at the top right of the container. The main.dart file: Dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'TextSpan', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(), debugShowCheckedModeBanner: false, ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('GeeksforGeeks Align Widget'), backgroundColor: Colors.green), body: Center( child: Container( height: 240.0, width: 240.0, color: Colors.green, child: Align( alignment: Alignment.topRight, child: Image.network( "https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png", width: 100, )), ))); } } Output: Comment More infoAdvertise with us Next Article Align Widget in Flutter T taran910 Follow Improve Article Tags : Dart Flutter Android Flutter Flutter-Widgets +1 More Similar Reads Flow Widget in Flutter The Flow widget in Flutter is a layout widget that positions children's elements in a flow along with sizing and positions its children proficiently using FlowDelegate. It allows you to create a grid-like layout where the children are positioned according to a given alignment, and they flow from one 4 min read Center widget in Flutter Center widget comes built-in with flutter, it aligns its child widget to the center of the available space on the screen. The size of this widget will be as big as possible if the widthFactor and heightFactor properties are set to null and the dimensions are constrained. And in case the dimensions a 2 min read Drawer Widget in Flutter Drawer widget is used to provide access to different destinations and functionalities provided in your application. It is represented by three horizontal parallel lines on the upper end of the scaffold. It has a horizontal movement from the edge of the Scaffold that navigates the link to different r 5 min read Expandable Widget in Flutter The expandable widgets do not have a fixed size, they expand on the screen according to the available areas on the screen. Due to size constraints, certain widgets can throw rendering errors, so widgets are made expandable. The one use of expandable widgets is cards that include images, texts, and t 3 min read Flutter - Banner Widget Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex 3 min read Like