Image for post
Image for post

Before continuing with this article make sure that you know how a basic application run in flutter(How it codes look like).

I am writing this article because i was not able to work with available code examples to run a simple fade animation in all the widgets as i wanted.

While performing any animation in flutter make sure that the class extends StatefulWidget as the state changes when an animation is performed.

AnimationController controller;
Animation<double> animation;

initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

/*animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});*/
//this will start the animation
controller.forward();
}

In the above part Animation and AnimationController are declared and defined in a class.

//This part is not necessary to include, it depends on your //requirements whether you want to listen for status of animation //or not./*animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});*/

Now as the Animation and AnimationController are defined we will see how to apply it to certain widget.

Widget build(BuildContext context) {

return Container(
color: Colors.white,
child: FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Icon(Icons.check, size: 100.0,color: Colors.green,)
]
)
)
);
}

In above code, I used a FadeTransition widget in order to perform a fade animation on its child widget.

In usual examples over Youtube and flutter’s own documentation i found examples that wore working on Containers or FlutterLogo().

This is what worked for me.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

class LogoApp extends StatefulWidget {
_LogoAppState createState() => _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with TickerProviderStateMixin {

AnimationController controller;
Animation<double> animation;

initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

/*animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});*/

controller.forward();
}

Widget build(BuildContext context) {

return Container(
color: Colors.white,
child: FadeTransition(
opacity: animation,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Icon(Icons.check, size: 100.0,color: Colors.green,),
]
)
)
);
}
}

This is how the whole file looks.

Output:

Image for post
Image for post
Executed on Emulator(milliseconds: 4000)

I hope this help somebody who have issue similar to like i had.

This is my first article so i might not have done proper documentation and may be some grammatical errors as well.

Would love to hear about other better ideas to perform this animation.

Feel free to give me pointers on what I can do better while writing articles on medium and also if i can write code in better way. :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store