Flutter – AnimatedCrossFade Widget
Last Updated :
27 Apr, 2022
AnimatedCrossFade Widget creates a fade transition between two widgets when one widget is replaced by another. It is used when you need to give a fade kind of transition in between two widgets. It supports any kind of Flutter Widget like Text, Images, Icon as well as anything that is extended from the widget in Flutter. Also, it allows you to change the animation as well as the duration of the animation. A sample GIF is given below to get an idea about what we are going to do in this article.
Constructor
AnimatedCrossFade
({Key? key,
required Widget firstChild,
required Widget secondChild,
Curve firstCurve = Curves.linear,
Curve secondCurve = Curves.linear,
Curve sizeCurve = Curves.linear,
AlignmentGeometry alignment = Alignment.topCenter,
required CrossFadeState crossFadeState,
required Duration duration,
Duration? reverseDuration,
AnimatedCrossFadeBuilder layoutBuilder = defaultLayoutBuilder
})
Properties
- alignment: How the children should be aligned while the size is animating.
- crossFadeState: The child that will be shown when the animation has been completed.
- duration: The duration of the whole orchestrated animation.
- firstChild: The child that is visible when crossFadeState is CrossFadeState.showFirst. It fades out when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.
- firstCurve: The fade curve of the first child.
- hashCode: The hash code for this object.
- key: Controls how one widget replaces another widget in the tree.
layoutBuilderA builder that positions the firstChild and secondChild widgets.
- reverseDuration: The duration of the whole orchestrated animation when running in reverse.
- runtimeType: A representation of the runtime type of the object.
- secondChild: 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.
- secondCurve: The fade curve of the second child.
- sizeCurve: The curve of the animation between the two children’s sizes.
Note: firstChild and secondChild have required keywords applied which means these parameters are mandatory to use.
Example
The main.dart file.
Dart
import 'package:flutter/material.dart' ;
import 'package:permission_handler/permission_handler.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
debugShowCheckedModeBanner: false ,
);
}
}
class GFG extends StatefulWidget {
const GFG({Key? key}) : super(key: key);
@override
State<GFG> createState() => _GFGState();
}
class _GFGState extends State<GFG> with TickerProviderStateMixin {
late AnimationController _controller;
bool _bool = true ;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "GeeksForGeeks" ),
actions: [
TextButton(
onPressed: () {
setState(
() {
_bool = !_bool;
},
);
},
child: Text( "Switch" , style: TextStyle(color: Colors.white)),
),
],
),
body: Center(
child: AnimatedCrossFade(
firstChild: Container(
height: 230,
width: 250,
color: Colors.blue,
),
secondChild: Container(
height: 250,
width: 230,
color: Colors.green,
),
crossFadeState:
_bool ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 1)),
),
);
}
}
|
Note: The firstChild and secondChild can be any widget as long as they extend the class Widget.
Output:
Share your thoughts in the comments
Please Login to comment...