插件详情v0.0.4

animated_cross_fade_plus

一个 Flutter 包，提供增强版的 AnimatedCrossFade，支持多个子组件和可自定义的动画。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 61
喜欢数: 7
Pub 分数: 160

安装插件

flutter pub add animated_cross_fade_plus

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

AnimatedCrossFadePlus 通过支持多个子项并提供可自定义的动画，增强了 Flutter 的 AnimatedCrossFade。它能够在两个以上的 widget 之间实现流畅过渡，非常适合具有复杂状态变化的动态 UI。该包通过灵活的配置选项扩展了核心功能，包括淡入淡出持续时间、曲线和对齐方式，确保跨平台的流畅且响应迅速的视觉效果。专为寻求高级过渡控制而无需样板代码的开发者设计。

适合场景

多组件状态转换
动态 UI 内容切换
可自定义的淡入淡出动画
复杂的屏幕过渡
交互式应用界面
平滑的主题或模式切换

主要特点

对多个子项的支持
可自定义的动画曲线
可配置的淡入持续时间
灵活的对齐选项
跨平台兼容性
所需设置最少

适合对象

需要多状态转换的开发人员
专注于流畅动画的UI设计师
动态内容切换的应用程序
需要可重用的过渡组件的项目
构建交互式仪表板或向导的团队

使用建议

包含多个子项时可能增加复杂性
需要仔细调整动画参数
不适用于简单的单对单转换
使用重型组件时的性能影响
除了基本用法外，文档有限
最好与轻量级或优化的子部件一起使用

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Cross Fade Plus

A powerful Flutter package that enhances the traditional AnimatedCrossFade widget with support for multiple children, auto-play capabilities, and smooth transitions.

Demo

Auto-Play Carousel

Manual Navigation

Youtube Video

🎥 Check out the tutorial video on my YouTube channel to see it in action! Youtube video

Features 🚀

✨ Support for unlimited children (not just two like AnimatedCrossFade)
🎮 Manual navigation controls
🎯 Auto-play functionality
🎨 Multiple transition types (fade, slide, scale, slideAndFade)
📱 Separate enter and exit animations
🎭 Customizable transition configurations
🔄 Built-in play/pause controls
📍 Progress indicators

Installation 💻

Add this to your package's pubspec.yaml file:

dependencies:
  animated_cross_fade_plus: ^0.0.4

Usage 🎯

Basic Auto-Play Carousel

class AutoPlayExample extends StatefulWidget {
  @override
  _AutoPlayExampleState createState() => _AutoPlayExampleState();
}

class _AutoPlayExampleState extends State<AutoPlayExample> {
  final List<SlideContent> _slides = [
    SlideContent(
      title: 'Welcome',
      gradient: [Colors.purple, Colors.blue],
      icon: Icons.rocket_launch,
    ),
    SlideContent(
      title: 'Easy to Use',
      gradient: [Colors.orange, Colors.red],
      icon: Icons.touch_app,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return AnimatedCrossFadePlus(
      children: _slides.map((slide) => _buildSlide(slide)).toList(),
      transitionType: CrossFadeTransitionType.scale,
      enterConfig: const TransitionConfig(
        curve: Curves.easeInOutCubic,
        duration: Duration(milliseconds: 1000),
      ),
      exitConfig: const TransitionConfig(
        curve: Curves.easeInOutCubic,
        duration: Duration(milliseconds: 1000),
      ),
      autoPlay: true,
      autoPlayDuration: const Duration(seconds: 3),
    );
  }
}

Manual Navigation Carousel

class ManualExample extends StatefulWidget {
  @override
  _ManualExampleState createState() => _ManualExampleState();
}

class _ManualExampleState extends State<ManualExample> {
  final GlobalKey<AnimatedCrossFadePlusState> _key = GlobalKey();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedCrossFadePlus(
          key: _key,
          children: _items.map((item) => _buildItem(item)).toList(),
          transitionType: CrossFadeTransitionType.slideAndFade,
          enterConfig: const TransitionConfig(
            curve: Curves.easeInOutCubic,
            duration: Duration(milliseconds: 800),
            direction: AxisDirection.left,
          ),
          exitConfig: const TransitionConfig(
            curve: Curves.easeInOutCubic,
            duration: Duration(milliseconds: 800),
            direction: AxisDirection.right,
          ),
          onIndexChanged: (index) => setState(() => _currentIndex = index),
        ),
        Row(
          children: [
            ElevatedButton(
              onPressed: () => _key.currentState?.animateToIndex((_currentIndex - 1) % _items.length),
              child: Text('Previous'),
            ),
            ElevatedButton(
              onPressed: () => _key.currentState?.animateToIndex((_currentIndex + 1) % _items.length),
              child: Text('Next'),
            ),
          ],
        ),
      ],
    );
  }
}

Parameters ⚙️

Parameter	Type	Description
children	List	List of widgets to animate between
transitionType	CrossFadeTransitionType	Type of transition animation
enterConfig	TransitionConfig	Configuration for entering widget animation
exitConfig	TransitionConfig	Configuration for exiting widget animation
initialIndex	int	Starting index
autoPlay	bool	Enable/disable auto-play
autoPlayDuration	Duration?	Time between auto-play transitions
alignment	AlignmentGeometry	Alignment of children
constraints	BoxConstraints?	Optional size constraints
clipChildren	bool	Whether to clip children during animation
onIndexChanged	Function(int)?	Callback when index changes

Transition Types 🎭

enum CrossFadeTransitionType {
  fade,           // Simple fade transition
  slide,          // Slide animation
  scale,          // Scale animation
  slideAndFade,   // Combined slide and fade
}

TransitionConfig Properties 🛠️

class TransitionConfig {
  final Curve curve;              // Animation curve
  final Duration duration;        // Animation duration
  final AxisDirection direction;  // Slide direction (for slide transitions)

  const TransitionConfig({
    this.curve = Curves.linear,
    this.duration = const Duration(milliseconds: 300),
    this.direction = AxisDirection.right,
  });
}

Controller Methods 🎮

final GlobalKey<AnimatedCrossFadePlusState> _key = GlobalKey();

// Navigation
_key.currentState?.animateToIndex(2);   // Navigate to specific index

// Auto-play control is handled through the autoPlay property
// Toggle by updating the widget's autoPlay value