Chainig Multiple Animation
Complete Code For Chainig Multiple Animation In Flutter
Main.dart
import 'package:flutter/material.dart'; import 'dart:math'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin { AnimationController animationController; Animation<double> opacityAnimation; Animation<double> rotationAnimation; Animation<double> sizeAnimation; @override void initState() { super.initState(); animationController = AnimationController( vsync: this, duration: Duration(seconds: 5), ); opacityAnimation = Tween<double>( begin: 0.0, end: 1.0, ).animate(CurvedAnimation( parent: animationController, curve: Interval(0.0, 0.3, curve: Curves.fastOutSlowIn), )); rotationAnimation = Tween<double>( begin: 0.0, end: pi * 4, ).animate(CurvedAnimation( parent: animationController, curve: Interval(0.3, 0.6, curve: Curves.ease), )); sizeAnimation = Tween<double>( begin: 70, end: 120, ).animate(CurvedAnimation( parent: animationController, curve: Interval(0.6, 1.0, curve: Curves.fastOutSlowIn), )); animationController.forward(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: AppBar( backgroundColor: Colors.green, title: Text("Chainig Multiple Animation")), body: Center( child: AnimatedBuilder( animation: animationController, builder: (context, child) { return Container( transform: Matrix4.identity()..rotateZ(rotationAnimation.value), child: Opacity( opacity: opacityAnimation.value, child: Container( color: Colors.green, height: sizeAnimation.value, width: sizeAnimation.value, ), ), ); }, ), ), ); } }