How To Chain Multiple Animation Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

we take a look at how we can create longer more complex animations by chaining and composing different animations together. We can use these various animations and apply them to a single widget to give it multiple dynamic features. Specifically, we look at how we can build out a box animation that first fades in using the opacity widget and property. Next the box rotates around the z axis using the transform property. Then the box moves upwards and to the right which is accomplished by manipulating the margin and edge insets of the box. The box then scales upwards and becomes a larger box before changing from a square into a circle.

How To Chain Multiple Animation Using Flutter App

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,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Related Post