Flutter - Create Animation Using the AnimatedAlign Widget

The AnimatedAlign widget in Flutter is used to create animated transitions for aligning a child widget within a parent container. It smoothly animates the alignment property, allowing you to move a child widget from one position to another with a specified duration.

In this article, we are going to implement the AnimatedAlign widget. A demo video is given below to get an idea of what we are going to do in this article.

Demo Video

Basic Syntax of AnimatedAlign Widget

Required Tools

To build this app, you need the following items installed on your machine:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step-by-Step Implementation

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all, import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here, the execution of our app starts.

Step 4: Create MyApp Class

In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.

Step 5: Create AlignAnimationExample Class

In this class, we are going to implement the AlignAnimation widget that helps to create animated transitions for aligning a child text widget within a parent container. In this class, we are going to align the container widget left to right and right to left.

AnimatedAlign(
 duration: Duration(seconds: 1), // Animation duration
 alignment: _isAlignedRight
 ? Alignment.centerRight
 : Alignment.centerLeft, // Toggle alignment
 child: Container(
 width: 100,
 height: 100,
 color: Colors.green, // Background color of the container
 child: Center(
 child: Text(
 'Hello',
 style: TextStyle(color: Colors.white), // Text color
 ),
 ),
 ),
),

Code:

Complete Source Code

main.dart:

Output