Flutter开关动画插件flutter_switch_clipper的使用

flutter_switch_clipper 是一个用于Flutter应用中的动画切换插件，它通过剪切器（Clipper）实现两个小部件之间的平滑切换。本文将介绍如何使用这个插件，并提供完整的示例代码。

体验一下

您可以通过访问以下链接来查看 flutter_switch_clipper 的演示效果：

• Demo

使用方法

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_switch_clipper: ^最新版本号

然后运行 flutter pub get 来安装插件。

示例代码

以下是使用 flutter_switch_clipper 的完整示例代码：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey[200],
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(40),
          children: <Widget>[
            // 使用FillClipper并自定义相关参数
            SwitchClipper(
              initSelect: true,
              child: const Icon(Icons.favorite, size: 200, color: Colors.redAccent),
              background: const Icon(Icons.favorite, size: 200, color: Colors.white),
              duration: const Duration(milliseconds: 800),
              customClipperBuilder: (Animation<double> animation) => FillClipper(
                animation: animation,
                fillAlignment: Alignment.center,
                fillOffset: 50,
              ),
            ),

            // 默认FillClipper
            const SwitchClipper(
              enableWhenAnimating: false,
              child: Text(
                'FlutterCandies',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                  color: Colors.amber,
                  height: 2,
                ),
              ),
              background: Text(
                'FlutterCandies',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                  color: Colors.white,
                  height: 2,
                ),
              ),
              curve: Curves.slowMiddle,
              reverseCurve: Curves.linear,
            ),

            Wrap(
              children: <Widget>[
                // 使用ShutterClipper
                SwitchClipper(
                  child: ColoredBox(
                    color: Colors.blueGrey[200] ?? Colors.blueGrey,
                    child: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.white),
                  ),
                  background: const Icon(Icons.accessible_forward_outlined, size: 200, color: Colors.white),
                  curve: Curves.ease,
                  duration: const Duration(milliseconds: 800),
                  customClipperBuilder: (Animation<double> animation) => ShutterClipper(
                    animation: animation,
                    activeAlignment: Alignment.center,
                  ),
                ),

                // 使用CircleClipper切换图标颜色
                SwitchClipper(
                  child: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.blueAccent),
                  background: const Icon(Icons.accessibility_new_rounded, size: 200, color: Colors.white),
                  curve: Curves.ease,
                  duration: const Duration(milliseconds: 800),
                  customClipperBuilder: (Animation<double> animation) => CircleClipper(
                    animation: animation,
                  ),
                ),

                // 使用WaveClipper切换图标颜色
                SwitchClipper(
                  child: const Icon(Icons.access_time_filled_rounded, size: 200, color: Colors.blue),
                  background: const Icon(Icons.access_time_filled_rounded, size: 200, color: Colors.white),
                  curve: Curves.ease,
                  duration: const Duration(milliseconds: 2000),
                  customClipperBuilder: (Animation<double> animation) => WaveClipper(
                    animation: animation,
                    waveAlignment: Alignment.center,
                  ),
                ),

                // 使用CameraClipper切换图标颜色
                SwitchClipper(
                  child: Container(
                    width: 200,
                    height: 200,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.blue,
                    ),
                    child: const Text(
                      'Camera',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 40,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  background: Container(
                    width: 200,
                    height: 200,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white,
                    ),
                  ),
                  duration: const Duration(milliseconds: 1500),
                  customClipperBuilder: (Animation<double> animation) => CameraClipper(
                    animation: animation,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 40),

            const Text('点击上方图标或文本预览效果'),
          ],
        ),
      ),
    );
  }
}

解释

1. FillClipper：允许您自定义填充对齐和偏移量。
2. 默认FillClipper：使用默认的填充效果。
3. ShutterClipper：实现类似于快门的动画效果。
4. CircleClipper：实现圆形切换效果。
5. WaveClipper：实现波浪形切换效果。
6. CameraClipper：实现类似相机快门的切换效果。

您可以根据需要选择不同的剪切器（Clipper），并通过调整参数来定制动画效果。希望这些示例能帮助您快速上手 flutter_switch_clipper 插件！