fade_animation_delayed

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>();

// Somewhere in your code
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();

// Register animations
final key1 = animationManager.registerAnimation('animation1');
final key2 = animationManager.registerAnimation('animation2');

// Control animations
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),

          // Example 1: Fade In with Slide from Bottom to Top
          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),

          // Example 2: Zoom In Animation
          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),

          // Example 3: Rotation Animation
          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),

          // Example 4: Bounce Out with Slide from Left to Right
          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),

          // Example 5: Elastic Out with Fade In
          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),

          // Example 6: Repeated Slide and Fade
          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),

          // Example 7: Custom Animation Builder
          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),

          // Example 8: 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),
            ),
          ),

          const SizedBox(height: 20),

          // Example 9: Toggle Visibility
          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.