Flutter自定义着色器插件flutter_shaders的使用

flutter_shaders简介

flutter_shaders 是一个用于简化Flutter中FragmentProgram API使用的工具包。通过这个插件，开发者可以更方便地在Flutter应用中集成和使用自定义着色器（shaders），从而实现复杂的图形效果。

可用的着色器

该插件自带了一些预定义的着色器，可以直接在项目中引用。例如：

• Pixelation：像素化效果，将提供的采样器缩减为MxN样本。它可以通过AnimatedSampler widget来使用。

为了在你的应用程序中包含这些着色器，你需要在pubspec.yaml文件中声明它们。以Pixelation着色器为例，在pubspec.yaml添加如下内容：

flutter:
  shaders:
    - packages/flutter_shaders/shaders/pixelation.frag

这行配置告诉Flutter从指定路径加载着色器代码。

示例代码解析

下面是一个完整的示例demo，展示了如何在Flutter应用中使用flutter_shaders创建一个带有自定义着色器效果的应用程序。

main.dart

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';

void main() async {
  // 加载着色器程序
  final ui.FragmentProgram program = await ui.FragmentProgram.fromAsset('shaders/inkwell.frag');
  
  // 启动应用程序
  runApp(MyApp(program: program));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.program});

  final ui.FragmentProgram program;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashFactory: ShaderInkFeatureFactory(program, (
          shader, {
          required double animation,
          required Color color,
          required Offset position,
          required Size referenceBoxSize,
          required double targetRadius,
          required TextDirection textDirection,
        }) {
          shader.setFloatUniforms((uniforms) => uniforms
            ..setFloat(animation)
            ..setColor(color, premultiply: true)
            ..setFloat(targetRadius)
            ..setOffset(position));
        }),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

解释

1. 导入必要的库：首先导入了dart:ui和flutter_shaders库。
2. 异步加载着色器：在main()函数中，我们异步加载了一个名为inkwell.frag的着色器文件，并将其传递给MyApp构造函数。
3. 创建MaterialApp：在MyApp类中，设置了主题并指定了一个自定义的splashFactory，它接收一个ui.FragmentProgram对象作为参数。这里使用了ShaderInkFeatureFactory工厂方法来生成带有自定义着色器效果的水波纹动画。
4. 设置UI布局：最后，在MyHomePage中构建了一个简单的用户界面，包括一个计数器和一个浮动按钮。每次点击按钮时，计数器加一，并触发重新绘制。

以上就是关于flutter_shaders的基本使用说明及示例代码。你可以根据自己的需求修改着色器逻辑或添加更多类型的着色器到你的Flutter项目中。