In this blog, we will explore the Animated Align Widget in a flutter. We will be using some core functions available in a flutter. We will implement a demo of the Animated Align Widget in your flutter applications. So let’s get started.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”.
Animated Align Widget:
The Animated Align Widget align that automatically positions the child’s position in a given period in a given alignment. And you can choose a period with a curve for the animation. And the widget will animate the alignment to the new target.
Let’s talk about some main constructors of the animated Align Widget. This widget has 3 properties. which do this work in our entire animation. As follows.
alignment(Alignment): where initially the child widget is placed.
curve(Curve): Easy curves are used to adjust the rate of changes in curve animation. This allows the speed to be slow and fast. there are some different-different types of options available.
duration(Duration): the Duration we can decide the time taken for a change of alignment according to ourselves.
Demo Module :
Code Implementation:
Create a new dart file calledanimated_align_demo inside the lib folder.
AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 2),
curve: Curves.easeInOutBack,
child: SizedBox(
width: 100.0,
height: 100.0,
child: Image.asset(
'assets/images/pluginIcon.png',
height: 40,
)),
),
As I have understood above about the animated align widget. I have considered this as a demo in this screen. And a little code of this widget has been given above. As this screen has an image whose arrangement will go from Alignment.topRight to Alignment.bottomLeft. The duration time is also set as per our It has the option of the curve. There are many types of the curve. We have used the curves (Curves.easeInOutBack).
Code File :
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter/painting.dart';
class AnimatedAlignDemo extends StatefulWidget {
@override
_AnimatedAlignDemoState createState() => _AnimatedAlignDemoState();
}
class _AnimatedAlignDemoState extends State<AnimatedAlignDemo> {
static const _alignments = [
// Alignment.topLeft,
Alignment.topRight,
Alignment.bottomLeft,
// Alignment.bottomRight,
];
var _index = 0;
AlignmentGeometry get _alignment => _alignments[_index % _alignments.length];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.white,
title: Text(
'Animated Align',
style: TextStyle(
color: Colors.black,
),
),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(15),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 2),
curve: Curves.easeInOutBack,
child: SizedBox(
width: 100.0,
height: 100.0,
child: Image.asset(
'assets/images/pluginIcon.png',
height: 40,
)),
),
ButtonTheme(
minWidth: 100,
height: 50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: RaisedButton(
color: Colors.purple.withOpacity(0.6),
onPressed: () {
setState(() {
_index++;
});
},
child: Text(
'Click Me',
style: TextStyle(
fontFamily: 'Roboto Medium',
fontSize: 15.0,
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
color: Colors.white),
),
),
),
],
),
),
);
}
}
Conclusion :
In this article, I have explained an Animated Align Widget demo, you can modify and experiment according to your own, this little introduction was from the Animated Align Widget our side.
I hope this blog will provide you with sufficient information in Trying up the Animated Align Widget in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
