FadeAnimationDelayed
FadeAnimationDelayed is a custom Flutter widget that allows you to display content with a delay and various animations. It's perfect for creating dynamic and engaging user interfaces.
Features
Display content with adjustable delay
Multiple animation types including fade, slide, scale, and rotation
Repeatable animations
Controllable animations (pause, resume, and reset)
Support for custom animations
Animation group management
Global and instance state tracking
Auto-start and initial pause options
Animation completion callbacks
Custom animation composition
Installation
To use this package, add fade_animation_delayed as a dependency in your pubspec.yaml file:
dependencies:
fade_animation_delayed: ^0.0.3
Usage
To use FadeAnimationDelayed, import it in your Dart code:
import 'package:fade_animation_delayed/fade_animation_delayed.dart' ;
Then you can use it in your widgets:
FadeAnimationDelayed (
delay: Duration (seconds: 1 ),
child: Text ('Hello, World!' ),
)
Advanced Examples
Using Multiple Animations
final GlobalKey <FadeAnimationDelayedState > delayedDisplayKey = GlobalKey <FadeAnimationDelayedState >();
FadeAnimationDelayed (
stateKey: delayedDisplayKey,
delay: Duration (seconds: 1 ),
animationDuration: Duration (milliseconds: 500 ),
easingType: EasingType .easeInOut,
enableScaling: true ,
enableRotation: true ,
child: Text ('Text with multiple animations' ),
)
Repeating Animation
FadeAnimationDelayed (
delay: Duration (seconds: 1 ),
repeat: true ,
repeatInterval: Duration (seconds: 3 ),
child: Icon (Icons .favorite),
)
Controlling Animation
final GlobalKey <FadeAnimationDelayedState > delayedDisplayKey = GlobalKey <FadeAnimationDelayedState >();
ElevatedButton (
onPressed: () => delayedDisplayKey.currentState?.pauseAnimation (),
child: Text ('Pause' ),
),
ElevatedButton (
onPressed: () => delayedDisplayKey.currentState?.resumeAnimation (),
child: Text ('Resume' ),
),
ElevatedButton (
onPressed: () => delayedDisplayKey.currentState?.resetAnimation (),
child: Text ('Reset' ),
),
Custom Animation
FadeAnimationDelayed (
customAnimationBuilder: (context, child, animation) {
return FadeTransition (
opacity: animation,
child: Transform (
transform: Matrix4 .rotationZ (animation.value * 2 * pi),
alignment: Alignment .center,
child: child,
),
);
},
child: Text ('Custom Animation' ),
)
Using Extension Method
Center (
child: const Text (
"Hello" ,
style: TextStyle (fontSize: 40 ),
).animate (
delay: const Duration (seconds: 1 ),
fadeIn: true ,
easingType: EasingType .bounceOut,
repeat: false ,
repeatInterval: const Duration (seconds: 1 ),
),
)
Animation Group Management
final animationManager = AnimationGroupManager ();
final key1 = animationManager.registerAnimation ('animation1' );
final key2 = animationManager.registerAnimation ('animation2' );
animationManager.pauseAnimation ('animation1' );
animationManager.resumeAll ();
animationManager.resetAll ();
Animation Composition
AnimationComposer .composeAnimations (
child: Text ('Composed Animation' ),
animationTypes: [
AnimationType .slide,
AnimationType .fadeIn,
AnimationType .zoomIn
],
slideDirection: SlideDirection .rightToLeft,
easingType: EasingType .elasticOut,
)
Complete Example
void main () => runApp (const MyApp ());
class MyApp extends StatelessWidget const MyApp ({super .key});
@override
Widget build (BuildContext context) {
return MaterialApp (
title: 'FadeAnimationDelayed Demo' ,
theme: ThemeData (primarySwatch: Colors .blue),
home: const Screen (),
);
}
}
class Screen extends StatefulWidget const Screen ({super .key});
@override
State <Screen > createState () => _ScreenState ();
}
class _ScreenState extends State <Screen > final GlobalKey <FadeAnimationDelayedState > _delayedDisplayKey = GlobalKey <FadeAnimationDelayedState >();
bool _isVisible = true ;
@override
Widget build (BuildContext context) {
return Scaffold (
appBar: AppBar (
title: const Text ('FadeAnimationDelayed Demo' ),
),
body: ListView (
padding: const EdgeInsets .all (16.0 ),
children: [
const SizedBox (height: 20 ),
Row (
mainAxisAlignment: MainAxisAlignment .center,
children: [
ElevatedButton (
onPressed: () => _delayedDisplayKey.currentState?.pauseAnimation (),
child: const Text ('Pause' ),
),
const SizedBox (width: 10 ),
ElevatedButton (
onPressed: () => _delayedDisplayKey.currentState?.resumeAnimation (),
child: const Text ('Resume' ),
),
const SizedBox (width: 10 ),
ElevatedButton (
onPressed: () => _delayedDisplayKey.currentState?.resetAnimation (),
child: const Text ('Reset' ),
),
],
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (seconds: 1 ),
animationDuration: const Duration (seconds: 2 ),
animationType: AnimationType .slideFromOutside,
slideDirection: SlideDirection .bottomToTop,
fadeIn: true ,
child: _buildExampleCard ('Slide + Fade In (Bottom to Top)' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (seconds: 1 ),
animationDuration: const Duration (seconds: 2 ),
animationType: AnimationType .zoomIn,
enableScaling: true ,
minScale: 0.5 ,
maxScale: 1.0 ,
child: _buildExampleCard ('Zoom In Animation' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
stateKey: _delayedDisplayKey,
delay: const Duration (seconds: 1 ),
animationDuration: const Duration (seconds: 2 ),
animationType: AnimationType .rotation,
enableRotation: true ,
minRotation: 0.0 ,
maxRotation: 360 ,
child: _buildExampleCard ('Rotation Animation' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (seconds: 1 ),
animationDuration: const Duration (seconds: 2 ),
easingType: EasingType .bounceOut,
animationType: AnimationType .slideFromOutside,
slideDirection: SlideDirection .leftToRight,
child: _buildExampleCard ('Bounce Out + Slide (Left to Right)' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (milliseconds: 500 ),
animationDuration: const Duration (seconds: 3 ),
easingType: EasingType .elasticOut,
animationType: AnimationType .fadeIn,
minOpacity: 0.2 ,
maxOpacity: 1.0 ,
child: _buildExampleCard ('Elastic Out + Fade In' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (milliseconds: 500 ),
animationDuration: const Duration (seconds: 1 ),
repeat: true ,
repeatInterval: const Duration (seconds: 4 ),
animationType: AnimationType .slide,
slideDirection: SlideDirection .topToBottom,
child: _buildExampleCard ('Repeated Slide + Fade (Top to Bottom)' ),
),
const SizedBox (height: 20 ),
FadeAnimationDelayed (
delay: const Duration (milliseconds: 500 ),
animationDuration: const Duration (seconds: 2 ),
customAnimationBuilder: (context, child, animationController) {
return FadeTransition (
opacity: Tween <double >(begin: 0.0 , end: 1.0 ).animate (animationController),
child: ScaleTransition (
scale: Tween <double >(begin: 0.5 , end: 1.0 ).animate (animationController),
child: child,
),
);
},
child: _buildExampleCard ('Custom Animation Builder' ),
),
const SizedBox (height: 20 ),
Center (
child: const Text (
"Hello" ,
style: TextStyle (fontSize: 40 ),
).animate (
delay: const Duration (seconds: 1 ),
fadeIn: true ,
easingType: EasingType .bounceOut,
repeat: false ,
repeatInterval: const Duration (seconds: 1 ),
),
),
const SizedBox (height: 20 ),
ElevatedButton (
onPressed: () {
setState (() {
_isVisible = !_isVisible;
});
},
child: Text (_isVisible ? 'Hide' : 'Show' ),
),
const SizedBox (height: 20 ),
Center (
child: FadeAnimationDelayed (
delay: const Duration (milliseconds: 500 ),
animationDuration: const Duration (milliseconds: 500 ),
fadeIn: _isVisible,
child: const Text (
'This text can be hidden or shown' ,
style: TextStyle (fontSize: 35 ),
),
),
),
],
),
);
}
Widget _buildExampleCard (String text) {
return Container (
padding: const EdgeInsets .all (16.0 ),
decoration: BoxDecoration (
color: Colors .blueAccent,
borderRadius: BorderRadius .circular (12.0 ),
),
child: Center (
child: Text (
text,
textAlign: TextAlign .center,
style: const TextStyle (
color: Colors .white,
fontSize: 18 ,
),
),
),
);
}
}
Contributing
Your contributions to this project are highly appreciated. Please open an issue for any problems, suggestions, or improvements, or submit a pull request.
