Align Widget

What is Align Widget?

The Align widget is to align its child within itself and also size's itself based on its child's size.

0Default Constructor

The default constructor create an alignment widget.

Align(
    alignment: Alignment.center,
    widthFactor:
    heightFactor:
    child:
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The alignment parameter is to control horizontal and vertical alignments respectively. Default to Alignment.center

The widthFactor parameter is to set its width to the child's width multiplied by this factor. Its value must be non-negative.

The heightFactor parameter is to set its height to the child's height multiplied by this factor. Its value must be non-negative.

The child parameter is to add the child below the Align widget in a tree.

Code snippet

This code snippet shows how to configure Align widget with its arguments.

Align(
      alignment: Alignment.topRight,
      child: FlutterLogo(
        size: 60,
      ),
)

Demo Code

This example shows how to place flutter logo at the top right corner.

import 'package:flutter/material.dart';

class AlignDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: Align(
          alignment: Alignment.topRight,
          child: FlutterLogo(
            size: 60,
          ),
        ),
      ),
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Align Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: AlignDemo()),
        ),
      ),
    );
  }
}

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