Introduce the Align

Align is usually used to determine the position of the child control in the parent layout, such as center, upper left, and other alignments.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

When do I use Align?

Align is used when the child component needs to be located somewhere in the parent component

Align constructor

const Align({
    Key? key,
    this.alignment = Alignment.center,  // The alignment of child components within parent components
    this.widthFactor,  // If set, Align is always twice the width of child
    this.heightFactor, // If set, Align is always twice the height of child
    Widget? child,	/ / child widgets
  }) : assert(alignment ! =null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
Copy the code

Complete sample code

import 'package:flutter/material.dart';

class AlignExample extends StatefulWidget {
  @override
  _AlignExampleState createState() => _AlignExampleState();
}

class _AlignExampleState extends State<AlignExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AlignExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.blueAccent,
              child: Align(
                alignment: Alignment.topRight,
                widthFactor: 100.0,
                heightFactor: 2.0,
                child: Text("Align"() [() [() [() [() }}Copy the code

AlignmentGeometry introduction

AlignmentGeometry is a component of how to align a Child, and we use its subclass Alignment for Alignment Settings.

Alignment,

Alignment derives from AlignmentGeometry, which represents a point in the rectangle. It has two attributes X and Y, which represent the offset in the horizontal and vertical directions respectively.

const Alignment(this.x, this.y)
  : assert(x ! =null),
		assert(y ! =null);
Copy the code

Alignment properties

/// Top left aligned
static const Alignment topLeft = Alignment(1.0.1.0);

/// Top center alignment
static const Alignment topCenter = Alignment(0.0.1.0);

/// Top right aligned
static const Alignment topRight = Alignment(1.0.1.0);

/// Center left
static const Alignment centerLeft = Alignment(1.0.0.0);

/// Align vertically and center
static const Alignment center = Alignment(0.0.0.0);

/// Center right
static const Alignment centerRight = Alignment(1.0.0.0);

/// Bottom left aligned
static const Alignment bottomLeft = Alignment(1.0.1.0);

/// Bottom middle alignment
static const Alignment bottomCenter = Alignment(0.0.1.0);

/// Bottom right aligned
static const Alignment bottomRight = Alignment(1.0.1.0);
Copy the code

AnimatedAlign introduction

An animated version of the 'Align' component that automatically shifts the position of the child components for a given duration whenever the alignment changes.Copy the code

AnimatedAlign constructor

const AnimatedAlign({
  Key? key,
  required this.alignment,  // The alignment of child components in parent components is mandatory
  this.child,		/ / child component
  this.heightFactor,  // If set, Align is always twice the height of child
  this.widthFactor,  // If set, Align is always twice the width of child
  Curve curve = Curves.linear,  // The motion rate of the animation
  required Duration duration,   // The duration of the animation
  VoidCallback? onEnd,  // The callback at the end of the animation
}) : assert(alignment ! =null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, curve: curve, duration: duration, onEnd: onEnd);
Copy the code

AnimatedAlign complete sample code

import 'package:flutter/material.dart';

class AnimatedAlignExample extends StatefulWidget {
  @override
  _AnimatedAlignExampleState createState() => _AnimatedAlignExampleState();
}

class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedAlignExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 250.0,
              height: 250.0,
              color: Colors.green,
              child: AnimatedAlign(
                alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
                duration: Duration(milliseconds: 1000),
                curve: Curves.fastOutSlowIn,
                child: Icon(Icons.ac_unit, size: 40,),
                widthFactor: 2.0,
                heightFactor: 2.0,
                onEnd: () {
                  print("Enter at the end of animation");
                },
              ),
            ),
            ElevatedButton(
              child: Text('Change alignment parameters'), onPressed: () { setState(() { selected = ! selected; }); }),],),); }}Copy the code

AnimatedAlign effect display

conclusion

The Align component is used when the child component needs to be positioned somewhere in the parent component, and AnimatedAlign is an animated version of the Align component that automatically shifts the position of the child component for a given duration whenever the alignment changes.