套件詳情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