Fade Animation in Flutter

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();
}
//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();
}
});*/
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,)
]
)
)
);
}
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,),
]
)
)
);
}
}
Executed on Emulator(milliseconds: 4000)

--

--

Pursuing MCA. Interested in Flutter, Mobile App Development. Love from India :)

Love podcasts or audiobooks? Learn on the go with our new app.

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
Gurkirat Manny

Gurkirat Manny

15 Followers

Pursuing MCA. Interested in Flutter, Mobile App Development. Love from India :)