[移动开发]Flutter 电子签名

依赖：signature: ^3.2.1
基本用方法

 bool landScape = false; // 是否横屏

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

DrawView(
                    signatureController: _signatureController,
                    width: double.infinity,
                    height: 200,
                    landScape: landScape,
                    biggerCallback: () {
                      setState(() {
                        landScape = true;
                      });
                    },
                    resetCallback: () {
                      setState(() {
                        landScape = true;
                      });
                    },
                  ),

用法

import 'package:repair_app_android/common/ColorsUtil.dart';
import 'package:signature/signature.dart';

import '../../../index.dart';
import 'DrawView.dart';
import 'dart:ui' as ui;

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

class _SignaturePageState extends State<SignaturePage> {
  bool landScape = true; // 是否横屏

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

  @override
  Widget build(BuildContext context) {
    if (landScape == false) {
      return Scaffold(
        backgroundColor: ColorsUtil.black87,
        appBar: AppBar(
          brightness: Brightness.light,
          title: Text('类型'),
        ),
        body: SafeArea(
          child: FittedBox(
            fit: BoxFit.contain,
            child: DrawView(
              signatureController: _signatureController,
              width: 690,
              height: 370,
              landScape: landScape,
              biggerCallback: () {
                setState(() {
                  landScape = true;
                });
              },
              resetCallback: () {
                setState(() {
                  landScape = true;
                });
              },
            ),
          ),
        ),
      );
    } else {
      // 手写板横屏
      return Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.white,
          child: FittedBox(
            fit: BoxFit.contain,
            child: DrawView(
              signatureController: _signatureController,
              width: 690,
              height: 370,
              landScape: landScape,
              biggerCallback: () {
                setState(() {
                  landScape = false;
                });
              },
              resetCallback: () {
                setState(() {
                  landScape = false;
                });
              },
            ),
          ),
        ),
      );
    }
  }

}

签名View

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:repair_app_android/common/ColorsUtil.dart';
import 'package:signature/signature.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: 20,
                color: Colors.grey,
              ),
            ),
          ),
          // 放大按钮
          Positioned(
            top: 10,
            right: widget.landScape ? 0 : 10,
            child: IconButton(
              icon: Image.asset(
                'imgs/logo_light.png',
                width: 0,
                height: 0,
              ),
              onPressed: () {
                //widget.biggerCallback();
              },
            ),
          ),
          // 橡皮 & 完成 按钮
          Positioned(
            bottom: 10,
            right: widget.landScape ? 0 : 10,
            child: Row(
              children: [
                // 橡皮
                ElevatedButton(
                  child: Text('重写',style: TextStyle(fontSize: 12),),
                  onPressed: () {
                    setState(() {
                      widget.signatureController.clear();
                    });
                  },
                ),
                // 完成
                Offstage(
                  offstage: widget.landScape ? false : true,
                  child: Container(
                    width: 80,
                    height: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Colors.blue,
                    ),
                    child: FlatButton(
                      padding: EdgeInsets.zero,
                      child: Text(
                        '完成',
                        style: TextStyle(
                          fontSize: 26,
                          color: Colors.black87,
                        ),
                      ),
                      onPressed: () {
                        widget.resetCallback();
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}