Flutter动画切换插件fade_indexed_stack的使用

Flutter动画切换插件fade_indexed_stack的使用

fade_indexed_stack 是一个带有淡入淡出动画效果的 IndexedStack，并且支持懒加载功能。

启发来源

• diegoveloper 提供了如何将 FadeTransition 应用于 IndexedStack 的 gist。
• okaryo 提供了 lazy_load_indexed_stack 包。

使用方法

你可以像使用普通的 IndexedStack 一样使用 FadeIndexedStack。以下是一个简单的示例：

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

  [@override](/user/override)
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FadeIndexedStack(
        index: _currentIndex,
        children: [
          FirstPage(),
          SecondPage(),
          ThirdPage(),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        destinations: [
          NavigationDestination(icon: Icon(Icons.home), label: "Home"),
          NavigationDestination(icon: Icon(Icons.person), label: "Profile"),
          NavigationDestination(icon: Icon(Icons.settings), label: "Settings"),
        ],
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

在上面的示例中，FadeIndexedStack 会根据 _currentIndex 的变化来切换页面，并且带有淡入淡出的效果。底部导航栏的点击事件会更新 _currentIndex 的值，从而触发页面的切换。

更多细节

更多详细信息可以查看 示例文件。

完整示例

以下是一个完整的示例，展示了如何使用 FadeIndexedStack 和底部导航栏来实现页面切换：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FadeIndexedStack 示例',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: const NavigationView(),
    );
  }
}

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

  [@override](/user/override)
  State<NavigationView> createState() => _NavigationViewState();
}

class _NavigationViewState extends State<NavigationView> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FadeIndexedStack(
        index: _currentIndex,
        lazy: true,
        duration: const Duration(milliseconds: 300),
        children: const [
          HomePage(),
          ProfilePage(),
          SettingsPage(),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          NavigationDestination(
            icon: Icon(Icons.person),
            label: "Profile",
          ),
          NavigationDestination(
            icon: Icon(Icons.settings),
            selectedIcon: Icon(Icons.settings),
            label: "Settings",
          ),
        ],
        selectedIndex: _currentIndex,
        onDestinationSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("首页")),
      body: const Center(child: Text("首页")),
    );
  }
}

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("个人资料")),
      body: const Center(child: Text("个人资料页")),
    );
  }
}

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("设置")),
      body: const Center(child: Text("设置页")),
    );
  }
}