Flutterexperts

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

Animated Align Widget

Demo Module

Code Implementation

Code File

Conclusion

---

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.

---

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.