Flutter手写签名功能插件flutter_signature_view的使用

简介

flutter_signature_view 是一个用于在Flutter应用中实现手写签名功能的插件。它允许用户在屏幕上绘制签名，并提供了多种方法来获取和操作签名数据。

安装

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

dependencies:
  flutter_signature_view: ^1.1.1

如果你使用的是Flutter的 master 分支，或者遇到构建问题，可以使用 master 分支而不是特定版本。配置如下：

dependencies:
  flutter_signature_view:
    git:
      url: git://github.com:kzjn10/Flutter_SignatureWidget.git

添加依赖后，运行 flutter packages get 或者通过IDE更新包。

使用示例

初始化 SignatureView

简单的初始化方式：

SignatureView _signatureView = SignatureView();

带参数的初始化方式：

SignatureView _signatureView = SignatureView(
  backgroundColor: Colors.yellow,
  penStyle: Paint()
    ..color = Colors.blue
    ..strokeCap = StrokeCap.round
    ..strokeWidth = 5.0,
  onSigned: (data) {
    print("On change $data");
  },
);

参数说明

• backgroundColor: Canvas背景颜色。
• data: 字符串类型，用于初始化签名视图的默认数据（该数据将在回调函数 onSigned 中生成）。
• penStyle: Paint对象，自定义画笔样式。
• onSigned: 回调函数，返回签名的数据（字符串格式），可用于渲染默认签名视图。

访问数据

• 获取列表偏移量作为字符串值：_signatureView.exportListOffsetToString()
• 获取数据作为字节：_signatureView.exportBytes() - 异步函数
• 获取Base64字符串：_signatureView.exportBase64Image() - 异步函数
• 检查是否为空：_signatureView.isEmpty
• 清除当前签名：_signatureView.clear()

完整示例Demo

下面是一个完整的示例，展示了如何使用 flutter_signature_view 插件来创建一个带有签名功能的应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Signature View Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SignaturePage(),
    );
  }
}

class SignaturePage extends StatefulWidget {
  @override
  _SignaturePageState createState() => _SignaturePageState();
}

class _SignaturePageState extends State<SignaturePage> {
  final SignatureView _signatureView = SignatureView(
    backgroundColor: Colors.grey[200],
    penStyle: Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 3.0,
    onSigned: (data) {
      print("Signature data: $data");
    },
  );

  void _clearSignature() {
    setState(() {
      _signatureView.clear();
    });
  }

  Future<void> _saveSignature() async {
    final String base64Image = await _signatureView.exportBase64Image();
    print("Base64 Image: $base64Image");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Signature Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                decoration: BoxDecoration(border: Border.all(color: Colors.black)),
                child: _signatureView,
              ),
            ),
            SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                ElevatedButton(
                  onPressed: _clearSignature,
                  child: Text('Clear'),
                ),
                ElevatedButton(
                  onPressed: _saveSignature,
                  child: Text('Save'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何初始化 SignatureView，如何处理签名数据以及如何提供清除和保存签名的功能。希望这对你有所帮助！