What is Align Transition Flutter

The AlignTransition Widget is an example of Explicit Animation. The AlignTransition should not be confused with the AnimatedAlign Widget which is an example of Implicit Animation.

Although they have some similarities. Both are the Animated versions of Align. The Align automatically transitions the child’s position over a given duration.

Meanwhile the given alignment changes during that time.

However, in case of the AlignTransition Widget, the Align Widget animates its Align.alignment property.

Not only that, we need to define Animated Controller and Tween Animation separately.

Firstly, let us take a look at the below screenshot. After that we will discuss the code.

As we have just said, the Animation in Flutter is of two types. The Implicit and the Explicit like this one.

The Implicit Animation refers to built-in Animated Widgets. In addition, they are easier than the Explicit Animation.

Let us see how we can make this happen.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Animated Rotation';

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

class AlignTransitionExample extends StatefulWidget {
  const AlignTransitionExample({Key? key}) : super(key: key);

  @override
  _AlignTransitionExampleState createState() => _AlignTransitionExampleState();
}

class _AlignTransitionExampleState extends State<AlignTransitionExample>
    with TickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<AlignmentGeometry> _tweenAndCurvedAnimation =
      Tween<AlignmentGeometry>(
    begin: Alignment.bottomLeft,
    end: Alignment.center,
  ).animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Curves.bounceInOut,
    ),
  );

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20),
      width: 400.0,
      height: 400.0,
      color: Colors.red,
      child: AlignTransition(
        alignment: _tweenAndCurvedAnimation,
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Container(
            width: 50.0,
            height: 50.0,
            color: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

In the above code, the Animation object needs the Animation Controller first.

Then it uses the Curved Animation Widget where the parent argument takes the Animated Controller.

Besides, we can define the property of the Curve.

CurvedAnimation(
      parent: _animationController,
      curve: Curves.bounceInOut,
    ),
...

After that, we will use the Tween and the Curved Animation object inside the AlignTransition Widget as its “alignment” argument.

 AlignTransition(
        alignment: _tweenAndCurvedAnimation,
...

If we compare the AlignTransition Widget with the AnimatedAlign Widget, we will understand the difference.

The AnimatedAlign Widget is much easier to use. Certainly we can compare the difference. Therefore, you can take a look at the article where we have discussed the Animated Align Widget.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter