Flutter Animation Example Tutorial

16-May-2022

.

Admin

Flutter Animation Example Tutorial

Hi friends,

In this quick example, let's see Flutter Animation Example Tutorial. you will learn flutter transform animation example. we will help you to give example of how to implement animation in flutter app. step by step explain how to build animation in flutter.

you can see how to make animation in flutter

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

So let's see bellow example:

Step 1: Create Flutter Project


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

Step 2: Main File

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();

}

}

Run this Debug App

Output :

I hope it will help you....

#Flutter