Hi friends,

In this tutorial we will go over the demonstration of How to use Animation in Flutter. step by step explain how to make animation in flutter. you'll learn how to add animation in flutter. I’m going to show you about flutter transform animation example.

you can see how to implement animation in flutter app

I will give you simple Example of how to build animation in flutter

So let's see bellow example:

Follow along with the setup, you will be creating an Flutter app.

$flutter create flutter_animation_tutorial   

Navigate to the project directory:

$cd flutter_animation_tutorial   

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

void main() => runApp(const LogoApp());

class LogoApp extends StatefulWidget {
    const LogoApp({Key? key}) : super(key: key);

    @override
    _LogoAppState createState() => _LogoAppState();
}

class _LogoAppState extends State with SingleTickerProviderStateMixin {
    late Animation animation;
    late AnimationController controller;
    late AnimationController animationController;

    @override
    void initState() {
        super.initState();
        controller =
            animationController = AnimationController(duration: const Duration(seconds: 2), vsync: this);
        // #docregion addListener
        animation = Tween(begin: 0, end: 300).animate(controller)
        ..addListener(() {
            // #enddocregion addListener
            setState(() {
                print (animation.value.toString());
            });
            animation.addStatusListener((status){
                if(status == AnimationStatus.completed){
                    animationController.reverse();
                } else if(status == AnimationStatus.dismissed) {
                    animationController.forward();
                }
            });
        });
        controller.forward();
    }

    @override
    Widget build(BuildContext context) {
        return Center(
            child: Container(
                margin: const EdgeInsets.symmetric(vertical: 10),
                height: animation.value,
                width: animation.value,
                child: const FlutterLogo(),
            ),
        );
    }

    @override
    void dispose() {
        controller.dispose();
        super.dispose();
    }
}

I hope it will help you....