flutter 签名保存本地

业务场景：

收集集团人员的签名用于之后各种业务场景的签名

思路：

1. 刚开始的时候准备用H5写个CANVAS画板，点击客户端 签名 按钮跳转内嵌H5页面或者唤醒移动端默认浏览器打开网页 问题在于H5的下载图片(a 链接 下载， 教程网上都有)到本地在客户端兼容性太低(整个市场只有360浏览器可以下载)。

2. 用flutter直接写签名。

本文着重介绍 flutter 使用

实现:

插件介绍:

• signature (签名插件，源码和canvas画板差不多)
• image_gallery_saver （将图片的byte流保存到本地生成png格式）

额外提一句 flutter插件地址 类似 npm.org

代码实现

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

class Autograph extends StatefulWidget {
  @override
  _AutographState createState() => _AutographState();
}

class _AutographState extends State<Autograph> {
  var _signatureCanvas = Signature(
    height: 300,
    backgroundColor: Colors.lightBlueAccent,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //SIGNATURE CANVAS
              _signatureCanvas,
              //OK AND CLEAR BUTTONS
              Container(
                  decoration: const BoxDecoration(
                    color: Colors.black,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      //SHOW EXPORTED IMAGE IN NEW ROUTE
                      IconButton(
                        icon: const Icon(Icons.check),
                        color: Colors.blue,
                        onPressed: () async {
                          if (_signatureCanvas.isNotEmpty) {
                          	// 拿到canvas地址的bytes地址 格式是Uint8List
                            var data = await _signatureCanvas.exportBytes(); 
                           	// 这个byte流拿到你可以用Image.memory(data)直接渲染成图片
                            // 写入本地
                            final result = await ImageGallerySaver.saveImage(data);
                            if (result != '') {
                              Utils.showToast('文件已经保存到本地');
                              Navigator.of(context).pop();
                            }
                            
                          }
                        },
                      ),
                      //CLEAR CANVAS
                      IconButton(
                        icon: const Icon(Icons.clear),
                        color: Colors.blue,
                        onPressed: () {
                          setState(() {
                            return _signatureCanvas.clear();
                          });
                        },
                      ),
                    ],
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

代码小结

代码也是网上搜的代码关键字： flutter手动签名并保存/等等 但是真的拿到的时候也不对。少了业务逻辑，当你将signature画布拿到文本流的那一刻完全不知道如何处理。

业务场景是希望所有的图片上传到服务，众所周知我们上传的时候流的格式是formdata，我并不能将流封装成formdata，只能考虑到将流保存到本地，如若有大佬对此业务熟知望赐教。

短短的一行代码 写入本地的代码考虑了很久。对于文件流的各种处理总是不合人意。

总结下

并不是完全的客户端开发，对于flutter 和 dart 了解的也不是很深刻，但是文件流上传下载代码逻辑都是相同(思路很重要)，计算机或者说客户端的底层实现都是如此，给入行的小朋友得忠告就是 计算机原理一定要学习好。