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 sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of AnimatedAlign Widget

Dart

AnimatedAlign(
  duration: Duration(milliseconds: 500), // Duration for the animation
  alignment: Alignment.center, // Alignment of the child widget
  curve: Curves.easeInOut, // Animation curve (optional)
  child: YourChildWidget(), // The widget you want to animate
)

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 device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to 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.

Dart

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

Step 4: Create MyApp Class

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

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: AlignAnimationExample(),
    );
  }
}

Step 5: Create AlignAnimationExample Class

In this class we are going to Implement the AlignAnimation widget that help 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.Comments are added for better understanding.

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
                  ),
                ),
              ),
            ),

Dart

class AlignAnimationExample extends StatefulWidget {
  @override
  _AlignAnimationExampleState createState() => _AlignAnimationExampleState();
}

class _AlignAnimationExampleState extends State<AlignAnimationExample> {
  bool _isAlignedRight = false;

  void _toggleAlignment() {
    setState(() {
      _isAlignedRight = !_isAlignedRight; // Toggle the alignment state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedAlign Demo'), // App bar title
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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
                  ),
                ),
              ),
            ),
            SizedBox(height: 20), // Empty space between elements
            ElevatedButton(
              onPressed: _toggleAlignment, // Button click handler
              child: Text(_isAlignedRight
                  ? 'Align Left'
                  : 'Align Right'), // Button text
            ),
          ],
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: AlignAnimationExample(),
    );
  }
}

class AlignAnimationExample extends StatefulWidget {
  @override
  _AlignAnimationExampleState createState() => _AlignAnimationExampleState();
}

class _AlignAnimationExampleState extends State<AlignAnimationExample> {
  bool _isAlignedRight = false;

  void _toggleAlignment() {
    setState(() {
      _isAlignedRight = !_isAlignedRight; // Toggle the alignment state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedAlign Demo'), // App bar title
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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
                  ),
                ),
              ),
            ),
            SizedBox(height: 20), // Empty space between elements
            ElevatedButton(
              onPressed: _toggleAlignment, // Button click handler
              child: Text(_isAlignedRight
                  ? 'Align Left'
                  : 'Align Right'), // Button text
            ),
          ],
        ),
      ),
    );
  }
}

Output: