Animated Cross Fade in Flutter
Hello friends, I have written my new blog on Animated Cross Fade In Flutter. We will also implement a demo of the Animated Cross Fade, and describes his properties, and how to use them in your flutter applications. So let’s get started.
Table Of Contents:
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”.
Animated Cross Fade:
The Cross Fade widget which is a crossfade between given children and animates itself between its shapes. Crossfade is animated in the same place and changes its shape and colour. And we can use it in any other widget I can do such as text images, etc. The animation is controlled through the crossFadeState parameter. Let us understand some of its properties.
Properties of the Animated Cross Fade:
1.firstChild: First Child Properties that represents the first widget of the tree. And what it appears before the second widget is erased by the transition.
2. secondChild: The secondChild properties will represent the second widget to which the first child will transitions.
3. firstCurve/secondCurve: The animation effects first curve and second curve first child and second child. The default value of both of these is Curves.linear.
4.sizeCurve: The sizeCurve is the curve used to animate between the size of the fading-out child and the size of the fading-in child..
5. alignment: Alignment property defines how the children should align.
6. crossFadeState: The CrossFadeState itself determines which child to show and which second to show CrossFadeState.The child that is visible when crossFadeState is CrossFadeState.showSecond. It fades in when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.
7. duration: In Duration property, we can set the time taken in animation.
8. reverseDuration: TheReverse duration property we can set the time taken in animation to be completed in reverse order.
9. layoutBuilder: You can use a custom layout builder for positioning the widget during the transition.
Demo Module:
Code Implementation:
In this screen, we have taken two images. Which we have initialized inside the first child and second child properties. And clicking on the image shows the second image to be animated. The stateful widget is required to implement the AnimatedCrossFade widget.
Let us understand this with the help of a reference.
First, we will define a bool variable.
bool _firstChild = false;
Implemented the AnimatedCrossFade widget.Which has defined its duration inside crossFadeState.
AnimatedCrossFade(
firstCurve: Curves.easeInCubic,
secondCurve: Curves.easeInCirc,
firstChild: InkWell(
onTap: () {
setState(() {
_firstChild = !_firstChild;
});
},
child: Container(
child: ClipOval(
child: CircleAvatar(
maxRadius: 100,
child: Image.asset(
'assets/images/logo.png',
fit: BoxFit.fill,
),
),
),
alignment: Alignment.center,
),
),
secondChild: InkWell(
onTap: () {
setState(() {
_firstChild = !_firstChild;
});
},
child: Container(
height: 250,
width: 250,
child: Image.asset(
'assets/images/event_2.png',
fit: BoxFit.cover,
),
color: Colors.amberAccent.shade700,
),
),
crossFadeState:
_firstChild ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 2),
layoutBuilder: (
Widget topChild,
Key topChildKey,
Widget bottomChild,
Key bottomChildKey,
) {
return Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
PositionedDirectional(
child: bottomChild,
key: bottomChildKey,
top: 0,
),
PositionedDirectional(
child: topChild,
key: topChildKey,
),
],
);
},
),
The AnimatedCrossFade widget results can be seen in the given below image.
Code File:
import 'package:flutter/material.dart';
class CrossFadeAnimationDemo extends StatefulWidget {
@override
_CrossFadeAnimationDemoState createState() => _CrossFadeAnimationDemoState();
}
class _CrossFadeAnimationDemoState extends State<CrossFadeAnimationDemo> {
bool _firstChild = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('CrossFade Animation'),
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.all(16.0),
width: double.infinity,
height: 60,
color: Colors.orange.shade200,
),
AnimatedCrossFade(
firstCurve: Curves.easeInCubic,
secondCurve: Curves.easeInCirc,
firstChild: InkWell(
onTap: () {
setState(() {
_firstChild = !_firstChild;
});
},
child: Container(
child: ClipOval(
child: CircleAvatar(
maxRadius: 100,
child: Image.asset(
'assets/images/logo.png',
fit: BoxFit.fill,
),
),
),
alignment: Alignment.center,
),
),
secondChild: InkWell(
onTap: () {
setState(() {
_firstChild = !_firstChild;
});
},
child: Container(
height: 250,
width: 250,
child: Image.asset(
'assets/images/event_2.png',
fit: BoxFit.cover,
),
color: Colors.amberAccent.shade700,
),
),
crossFadeState:
_firstChild ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 2),
layoutBuilder: (
Widget topChild,
Key topChildKey,
Widget bottomChild,
Key bottomChildKey,
) {
return Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
PositionedDirectional(
child: bottomChild,
key: bottomChildKey,
top: 0,
),
PositionedDirectional(
child: topChild,
key: topChildKey,
),
],
);
},
),
Container(
margin: EdgeInsets.all(16.0),
width: double.infinity,
height: 60,
color: Colors.red.shade200,
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained an Animated CrossFade demo, which you can modify and experiment with according to your own, this little introduction was from the Animated CrossFade widget from our side.
I hope this blog will provide you with sufficient information in Trying up the Animated CrossFade widget in your flutter project. We will show you the Animated CrossFade widget is?, and working on it in your flutter applications, So please try it.
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
