Flutter手写签名插件signature的使用

简介

signature 是一个Flutter插件，它提供了性能优化的手写签名画布，并允许设置自定义样式、边界和初始状态。这是一个原生的Flutter实现，因此支持所有平台。

为什么选择这个插件？

在创建此插件时，没有其他解决方案能够同时满足以下需求：

• 在各种设备上提供所需的性能
• 设置画布边界的能力
• 使用之前保存的状态进行初始化的能力

升级到5.0.0+

• 此版本不再将 Signature 包装在 Expanded 小部件中（如果您不指定尺寸）
• 这样可以解决 Incorrect use of ParentDataWidget 错误，更多详情请参阅 issue #49
• 如果您传递了尺寸给小部件，则无需更改任何内容。
• 如果您在 Row、Column 或 Flex 小部件内使用小部件且未指定尺寸，则需要自己将 Signature 包装在 Expanded 中。
• 如果您未在上述提到的小部件中使用小部件且未指定尺寸，则无需更改任何内容，错误应从日志中消失。

使用方法

要使用此插件，请在您的 pubspec.yaml 文件中添加 signature 作为依赖项。

示例代码

下面是一个完整的示例demo，展示了如何使用 signature 插件来创建一个手写签名功能。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Signature Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark().copyWith(
        primaryColor: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 5,
    penColor: Colors.red,
    exportBackgroundColor: Colors.blue,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Signature Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Signature(
              controller: _controller,
              width: 300,
              height: 300,
              backgroundColor: Colors.lightBlueAccent,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  _controller.clear();
                },
                child: const Text('Clear'),
              ),
              ElevatedButton(
                onPressed: () async {
                  if (_controller.isNotEmpty) {
                    final data = await _controller.toPngBytes();
                    if (data != null) {
                      // Do something with the image bytes, e.g., save or send
                      print('Signature exported as PNG');
                    }
                  } else {
                    print('No signature provided.');
                  }
                },
                child: const Text('Export'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

主要功能说明

1. 导入包：import 'package:signature/signature.dart';
2. 初始化控制器：final SignatureController _controller = SignatureController(...);
3. 创建签名画布：Signature(controller: _controller, ...);
4. 清除画布：_controller.clear();
5. 导出PNG图像：await _controller.toPngBytes();
6. 检查是否有签名：_controller.isNotEmpty;
7. 导出点数据：var exportedPoints = _controller.points;
8. 销毁控制器：@override void dispose() { _controller.dispose(); super.dispose(); }

通过以上步骤，您可以轻松地在Flutter应用中集成手写签名功能。希望这个示例能帮助您快速上手并实现所需的功能。

贡献和支持

• 欢迎贡献！如果您想贡献代码，请创建一个PR。
• 如果您发现bug或有新功能的需求，请提交issue。

更多详情请参考 GitHub项目主页。