How To Use Align Widget Using Flutter Android Dart

Posted By Bajarangi soft , Posted On 06-11-2020

A widget that aligns its child within itself and optionally sizes itself based on the child's size.For example, to align a box at the bottom right, you would pass this box a tight constraint that is bigger than the child's natural size, with an alignment of Alignment.bottomRight.This widget will be as big as possible if its dimensions are constrained and widthFactor and heightFactor are null. If a dimension is unconstrained and the corresponding size factor is null then the widget will match its child's size in that dimension. If a size factor is non-null then the corresponding dimension of this widget will be the product of the child's dimension and the size factor. For example if widthFactor is 2.0 then the width of this widget will always be twice its child's width.

Align Widget

How it works:

-The alignment property describes a point in the child's coordinate system and a different point in the coordinate system of this widget. The Align widget positions the child such that both points are lined up on top of each other.
- The Align widget in this example uses one of the defined constants from Alignment, Alignment.topRight. This places the FlutterLogo in the top right corner of the parent blue Container.
Short Code :

Align(
  alignment: Alignment.bottomCenter,
  child: Container(
      height: 150.0,
      width: 150.0,
      color: Colors.blue[800]
  ),
),

Complete Code Align Widget For In Flutter
main.dart

import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      appBar: AppBar(
        backgroundColor: Colors.blue[800],
          title: Text("Align Widget"
          )
      ),
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
            height: 150.0,
            width: 150.0,
            color: Colors.blue[800]
        ),
      ),
    );
  }
}

Related Post