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 :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox