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