16-May-2022
.
Admin
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