Open In App

Flutter - Create Animation Using the AnimatedAlign Widget

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

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

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.

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

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.

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 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:

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
            ),
          ],
        ),
      ),
    );
  }
}

Complete Source Code

main.dart:

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


C

chinmaya121221
Improve
Article Tags :

Explore

Lightbox