Flutter动画切换插件flutter_animated_switchers的使用

Flutter动画切换插件flutter_animated_switchers的使用

如何使用

要使用 flutter_animated_switchers 插件，请遵循以下步骤：

步骤1: 添加插件依赖

在你的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  flutter_animated_switchers: [latest_version]

步骤2: 导入包

在你的 Dart 文件中导入插件：

import 'package:flutter_animated_switchers/flutter_animated_switchers.dart';

步骤3: 调用你所需的切换器类型

你可以调用不同的切换器类型。例如，使用 styleOne 类型：

const FlutterAnimatedSwitcher(
  switcherType: SwitcherType.styleOne,
),

步骤6: 监听状态变化

你还可以监听状态变化。例如，使用 styleFive 类型，并设置 onTap 和 onStateChanged 回调函数：

FlutterAnimatedSwitcher(
  switcherType: SwitcherType.styleFive,
  onTap: (() {
    print("Tapped");
  }),
  onStateChanged: ((state) {
    print("current state is $state");
  }),
)

示例代码

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.purple.shade50,
      appBar: AppBar(
        backgroundColor: Colors.purple,
        title: const Text("Flutter Animated Switchers"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const FlutterAnimatedSwitcher(
              switcherType: SwitcherType.styleOne,
            ),
            const FlutterAnimatedSwitcher(
              switcherType: SwitcherType.styleTwo,
            ),
            const FlutterAnimatedSwitcher(
              switcherType: SwitcherType.styleThree,
            ),
            const FlutterAnimatedSwitcher(
              switcherType: SwitcherType.styleFour,
            ),
            FlutterAnimatedSwitcher(
              switcherType: SwitcherType.styleFive,
              onTap: (() {
                // 忽略：避免打印
                print("Tapped");
              }),
              onStateChanged: ((state) {
                // 忽略：避免打印
                print("current state is $state");
              }),
            ),
          ],
        ),
      ),
    );
  }
}