Flutter手写签名signature

签名用的signature插件
https://pub.dev/packages/signature

image.png
image.png

Signature画板需要一个控制器SignatureController

final SignatureController _signatureController = SignatureController(
    penStrokeWidth: 10.w, // 线条宽度
    penColor: Colors.black, // 线条颜色
    exportBackgroundColor: Colors.transparent, // 导出图片背景色
);

基本用法：

Signature(
   controller: _signatureController,
   width: 400,
   height: 300,
   backgroundColor: Colors.white,
)

导出图片

signatureController.toImage();

清空画板

signatureController.clear();

我还需要橡皮擦按钮和放大按钮，以及横屏功能，所以单独写一个DrawView类:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:niuzhuang/Utils/Utils.dart';
import 'package:signature/signature.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DrawView extends StatefulWidget {
  final signatureController;
  final biggerCallback; // 放大回调
  final resetCallback; // 还原大小回调
  final double width;
  final double height;
  final bool landScape; // 是否横屏
  DrawView(
      {Key key,
      this.signatureController,
      this.biggerCallback,
      this.resetCallback,
      @required this.width,
      @required this.height,
      this.landScape})
      : super(key: key);

  @override
  _DrawViewState createState() => _DrawViewState();
}

class _DrawViewState extends State<DrawView> {
  bool isEmpty;

  @override
  void initState() {
    super.initState();

    if (widget.signatureController.value.length > 0) {
      isEmpty = false;
    } else {
      isEmpty = true;
    }

    // 监听画板
    widget.signatureController.addListener(() {
      bool tmpIsEmpty = true;
      if (widget.signatureController.value.length > 0) {
        tmpIsEmpty = false;
      } else {
        tmpIsEmpty = true;
      }
      if (isEmpty != tmpIsEmpty) {
        if (this.mounted) {
          setState(() {
            isEmpty = tmpIsEmpty;
          });
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: widget.landScape ? 1 : 0,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Signature(
            controller: widget.signatureController,
            width: widget.width,
            height: widget.height,
            backgroundColor: Colors.white,
          ),
          // 暂无签名
          Offstage(
            offstage: isEmpty ? false : true,
            child: Text(
              '签名（必填）',
              style: TextStyle(
                fontSize: 44.sp,
                color: hexColor('A5ACB4'),
              ),
            ),
          ),
          // 放大按钮
          Positioned(
            top: 10.w,
            right: widget.landScape ? 0 : 10.w,
            child: IconButton(
              icon: Image.asset(
                'images/手写板放大.png',
                width: 35.w,
                height: 35.w,
              ),
              onPressed: () {
                widget.biggerCallback();
              },
            ),
          ),
          // 橡皮 & 完成 按钮
          Positioned(
            bottom: 10.w,
            right: widget.landScape ? 0 : 10.w,
            child: Row(
              children: [
                // 橡皮
                IconButton(
                  icon: Image.asset(
                    'images/橡皮icon.png',
                    width: 45.w,
                    height: 45.w,
                  ),
                  onPressed: () {
                    setState(() {
                      widget.signatureController.clear();
                    });
                  },
                ),
                // 完成
                Offstage(
                  offstage: widget.landScape ? false : true,
                  child: Container(
                    width: 80.w,
                    height: 50.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.w),
                      color: mainColor,
                    ),
                    child: FlatButton(
                      padding: EdgeInsets.zero,
                      child: Text(
                        '完成',
                        style: TextStyle(
                          fontSize: 26.sp,
                          color: Colors.white,
                        ),
                      ),
                      onPressed: () {
                        widget.resetCallback();
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

使用：

@override
  Widget build(BuildContext context) {
    if (landScape == false) {
      return Scaffold(
        backgroundColor: hexColor('f7f7f9'),
        appBar: AppBar(
          brightness: Brightness.light,
          title: Text(
            nullToString(widget.type),
            style: TextStyle(
              fontSize: 34.sp,
            ),
          ),
        ),
        body: SafeArea(
          child: _initSubviews(),
        ),
      );
    } else {
      // 手写板横屏
      return Scaffold(
        body: Container(
          width: ScreenUtil().screenWidth,
          height: ScreenUtil().screenHeight,
          color: Colors.white,
          child: FittedBox(
            fit: BoxFit.contain,
            child: DrawView(
              signatureController: _signatureController,
              width: 690.w,
              height: 370.w,
              landScape: landScape,
              biggerCallback: () {
                setState(() {
                  landScape = false;
                });
              },
              resetCallback: () {
                setState(() {
                  landScape = false;
                });
              },
            ),
          ),
        ),
      );
    }
  }

用变量landScape记录画板是否在横屏状态，切换的时候修改landScape的值并重新build页面

DrawView使用RotatedBox来旋转画板，用Transform的话不会改变原组件的大小，只作用于绘制阶段，而RotatedBox则是在Layout阶段旋转

widget.signatureController.addListener给画板控制器添加监听，可以通过
signatureController.value数组的长度来判断画布是否有内容
由于横屏和普通状态我创建了两个画板，所以想保留线条数据就得使用同一个控制器signatureController，刷新DrawView的时候需要加一个mounted判断State是否已经销毁

if (this.mounted) {
    setState(() {
       isEmpty = tmpIsEmpty;
    });
}