Flutter动画切换插件easy_animated_indexed_stack的使用

简介

Easy Animated Indexed Stack 是一个针对 Flutter 默认的 IndexedStack 的替代品，它允许在不同小部件或屏幕之间进行简单的动画切换。

演示

开始使用

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  # 添加此行
  easy_animated_indexed_stack:

然后运行 flutter pub get 来获取新的依赖项。

使用方法

如上所述，该包提供了一个针对 Flutter 默认 IndexedStack 小部件的直接替换。这意味着你可以简单地将你的 IndexedStack 使用替换为 EasyAnimatedIndexedStack 实例。例如：

import 'package:easy_animated_indexed_stack/easy_animated_indexed_stack.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // 简单地将 `IndexedStack` 替换为 `EasyAnimatedIndexedStack`
        body: EasyAnimatedIndexedStack(
          // `selectedIndex` 是一个状态变量（整数）
          index: selectedIndex,
          // 自定义动画以满足你的需求
          animationBuilder: (context, animation, child) {
            return RotationTransition(
              turns: Tween<double>(begin: 1, end: 0).animate(animation),
              child: child,
            );
          },
          curve: Curves.easeInOut,
          duration: const Duration(milliseconds: 700),
          children: [
            ScreenA(onTap: () => setState(() => selectedIndex = 1)),
            ScreenB(onTap: () => setState(() => selectedIndex = 2)),
            ScreenC(onTap: () => setState(() => selectedIndex = 0)),
          ],
        ),
      ),
    );
  }
}

class ScreenA extends StatelessWidget {
  const ScreenA({super.key, required this.onTap});

  final VoidCallback onTap;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: onTap,
          child: const Text('Screen A (Tap to change)'),
        ),
      ),
    );
  }
}

class ScreenB extends StatelessWidget {
  const ScreenB({super.key, required this.onTap});

  final VoidCallback onTap;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: onTap,
          child: const Text('Screen B (Tap to change)'),
        ),
      ),
    );
  }
}

class ScreenC extends StatelessWidget {
  const ScreenC({super.key, required this.onTap});

  final VoidCallback onTap;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: onTap,
          child: const Text('Screen C (Tap to change)'),
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'package:easy_animated_indexed_stack/easy_animated_indexed_stack.dart';
   import 'package:flutter/material.dart';
   

2. 创建主应用类：

   class MainApp extends StatefulWidget {
     const MainApp({super.key});
   
     [@override](/user/override)
     State<MainApp> createState() => _MainAppState();
   }
   

3. 管理选中的索引：

   class _MainAppState extends State<MainApp> {
     int selectedIndex = 0;
   

4. 构建应用布局：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         body: EasyAnimatedIndexedStack(
           index: selectedIndex,
           animationBuilder: (context, animation, child) {
             return RotationTransition(
               turns: Tween<double>(begin: 1, end: 0).animate(animation),
               child: child,
             );
           },
           curve: Curves.easeInOut,
           duration: const Duration(milliseconds: 700),
           children: [
             ScreenA(onTap: () => setState(() => selectedIndex = 1)),
             ScreenB(onTap: () => setState(() => selectedIndex = 2)),
             ScreenC(onTap: () => setState(() => selectedIndex = 0)),
           ],
         ),
       ),
     );
   }
   

5. 定义各个屏幕类：

   class ScreenA extends StatelessWidget {
     const ScreenA({super.key, required this.onTap});
   
     final VoidCallback onTap;
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: InkWell(
             onTap: onTap,
             child: const Text('Screen A (Tap to change)'),
           ),
         ),
       );
     }
   }
   
   class ScreenB extends StatelessWidget {
     const ScreenB({super.key, required this.onTap});
   
     final VoidCallback onTap;
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: InkWell(
             onTap: onTap,
             child: const Text('Screen B (Tap to change)'),
           ),
         ),
       );
     }
   }
   
   class ScreenC extends StatelessWidget {
     const ScreenC({super.key, required this.onTap});
   
     final VoidCallback onTap;
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: InkWell(
             onTap: onTap,
             child: const Text('Screen C (Tap to change)'),
           ),
         ),
       );
     }
   }