Flutter Development (Day-15):

• All source code : Click Here.
• In this post we are going to extend our knowledge by exploring more about animations in Flutter.
• In the last two posts we  have discussed about basic delay animations by creating a simple Login and SignUp Screens.
• In this post we are going to talk another two types of animations PARENT,VALUE CHANGED ANIMATION.
•  Parenting animation  -> In the below example one is the box moving along the x axis, and the same box is resizing.
• Value Changed Animation -> IN the below example the value is changing between 10 to 1 by including some Animation.

       Demo:

      Explanation

• Define the animations like

 
void initState() {

    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(
        seconds: 4,
      ),
    );
    parentAnimation = Tween<double>(
      begin: -0.50,
      end: 0.0,
    ).animate(
      CurvedAnimation(
        curve: Curves.fastOutSlowIn,
        parent: animationController,
      ),
    );
    // Delayed animation
    childAnimation = Tween<double>(
      begin: 2.0,
      end: 100.0,
    ).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Curves.fastOutSlowIn,
      ),
    );
    counterAnimation = IntTween(begin: 10, end: 0).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Curves.bounceInOut,
      ),
    );

• Add the value in a Text Widget  

Text("${counterAnimation.value}",)

• Transform widget must be of parentAnimation like below that it starts from the left side of the screen.

Transform(
transform: Matrix4.translationValues(                  
parentAnimation.value * width,0.0,0.0,),);

•  And the Child Animation is given to container height and width that we can resize the container size.                

Container(
height: childAnimation.value * 2, 
width: childAnimation.value * 2,
);

• If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to do more tutorials.
• If you have any doubts feel free to ask me in the comment section or email me ramubugudi4@gmail.com I can definetly give reply.

Follow me on:
 Twitter  Github   LinkedIn