Flutter着色器快照插件 flutter_shader_snap 的使用

flutter_shader_snap 是一个用于创建类似于“灭霸响指”效果的简单Flutter插件。它提供了两种主要的效果：分裂（split）和烟雾（smoke）。下面是该插件的详细使用方法。

插件介绍

• Pub Package
• MIT License

开始使用

1. 添加依赖

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

dependencies:
  flutter_shader_snap: latest version

2. 添加着色器

在 pubspec.yaml 文件中添加相应的着色器文件路径：

flutter:
  shaders:
    - packages/flutter_shader_snap/shaders/split_snap_effect_shader.glsl # 如果使用 SnapShaderType.split (默认)
    - packages/flutter_shader_snap/shaders/split_reversed_snap_effect_shader.glsl # 如果使用 SnapShaderType.splitReversed
    - packages/flutter_shader_snap/shaders/smoke_snap_effect_shader.glsl # 如果使用 SnapShaderType.smoke

3. 创建并使用 AnimationController

创建一个 AnimationController 并将其传递给 SnapShader 小部件：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late final _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  );

  @override
  Widget build(BuildContext context) {
    return SnapShader(
      controller: _controller,
      child: AnyWidget(), // 替换为你要应用效果的任何小部件
    );
  }
}

性能优化

着色器仅在动画运行时应用于子小部件，因此不会影响应用程序的整体性能。为了进一步优化，可以使用 AnimatedSampler 来确保只在需要时应用着色器。

builder: (context, child) => controller.value == 0
    ? child!
    : AnimatedSampler

完整示例 Demo

以下是一个完整的示例，展示了如何使用 flutter_shader_snap 插件来实现分裂和烟雾效果，并允许用户通过按钮控制这些效果。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_shader_snap/flutter_shader_snap.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Shader Snap DEMO',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  );
  late final _controller2 = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  );
  int _counter = 0;
  int _index = 0;
  var _snapShaderType = SnapShaderType.split;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    _controller2.addStatusListener((status) async {
      if (status != AnimationStatus.completed || _controller2.value == 0) return;
      await Future.delayed(const Duration(seconds: 3));
      _controller2.animateBack(0, duration: const Duration(seconds: 1));
    });

    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _index++;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return SnapShader(
      controller: _controller2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Flutter Shader Snap DEMO'),
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                const Spacer(),
                SnapShader(
                  controller: _controller,
                  snapShaderType: _snapShaderType,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'You have pushed the button this many times:',
                        style: Theme.of(context).textTheme.bodyLarge?.copyWith(color: Colors.green),
                      ),
                      Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.headlineMedium,
                      ),
                      const SizedBox(height: 8),
                      AnimatedContainer(
                        duration: const Duration(seconds: 1),
                        width: 100,
                        height: 100,
                        color: Colors.primaries[_index % Colors.primaries.length],
                      ),
                      const SizedBox(height: 8),
                      const Text('Use split (on) or smoke (off) shader'),
                      ...SnapShaderType.values.map(
                        (e) => GestureDetector(
                          onTap: () => setState(() => _snapShaderType = e),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              children: [
                                Radio(
                                  groupValue: _snapShaderType,
                                  value: e,
                                  onChanged: (value) => setState(() => _snapShaderType = e),
                                ),
                                Text(e.toString().split('.').last),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Container(
                          width: 100,
                          height: 100,
                          margin: const EdgeInsets.only(right: 8, bottom: 50),
                          decoration: BoxDecoration(
                            color: Colors.primaries[(_index + 5) % Colors.primaries.length],
                            shape: BoxShape.circle,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Slider(
                  value: _controller.value,
                  onChanged: (value) => _controller.value = value,
                ),
                const Spacer(),
                ElevatedButton(
                  onPressed: () => _controller.forward(),
                  child: const Text('Snap!'),
                ),
                const SizedBox(height: 8),
                ElevatedButton(
                  onPressed: () => _controller.stop(canceled: false),
                  child: const Text('Pause'),
                ),
                const SizedBox(height: 8),
                ElevatedButton(
                  onPressed: () => _controller.reset(),
                  child: const Text('Reset'),
                ),
                const SizedBox(height: 8),
                ElevatedButton(
                  onPressed: () => _controller2.forward(),
                  child: const Text('Snap EVERYTHING!'),
                ),
                const SizedBox(height: 8),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 SnapShader 小部件来应用分裂或烟雾效果，并且可以通过按钮控制动画的播放、暂停和重置。此外，还展示了如何动态切换不同的着色器类型。