flutter 手写画板

使用库 signature: ^5.2.1

import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flu_merchant/app_constants.dart';
import 'package:flu_merchant/ui/common/common.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:signature/signature.dart';


typedef CallBack = void Function(Uint8List? imageByte);
class DrawingBoardPage extends StatefulWidget {
  final CallBack? drawComplete;
  bool landScape; // 不用了
  DrawingBoardPage({
    required this.landScape,
    this.drawComplete,
    Key? key}) : super(key: key);

  @override
  State<DrawingBoardPage> createState() => _DrawingBoardPageState();
}

class _DrawingBoardPageState extends State<DrawingBoardPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  }
  final SignatureController _signatureController = SignatureController(
    penStrokeWidth: 3,
    penColor: Colors.black,
    exportBackgroundColor: Colors.white,
    exportPenColor: Colors.black,
    onDrawStart: () => print('onDrawStart called!'),
    onDrawEnd: () => print('onDrawEnd called!'),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // width: ScreenUtil().screenWidth,
        // height: ScreenUtil().screenHeight,
        color: Colors.white,
        child: FittedBox(
          fit: BoxFit.contain,
          child: DrawingView(
            signatureController: _signatureController,
            width: 1.sh,
            height: 1.sw,
            landScape: widget.landScape,
            drawComplete: (image) {
              if (widget.drawComplete != null) {
                widget.drawComplete!(image);
              }
            },
            resetCallback: () {
              setState(() {
              });
            },
          ),
        ),
      ),
    );
  }
}



class DrawingView extends StatefulWidget {
  final CallBack? drawComplete;
  final SignatureController signatureController;
  final resetCallback; // 还原大小回调
  final double width;
  final double height;
  late bool landScape; // 是否横屏
  DrawingView(
      {Key? key,
        this.drawComplete,
        required this.signatureController,
        this.resetCallback,
        required this.width,
        required this.height,
        required this.landScape})
      : super(key: key);

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

class _DrawingViewState extends State<DrawingView> {
  bool isEmpty = true;

  @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: aaa(),
    );
  }

  Widget aaa() {
    return Stack(
      alignment: Alignment.center,
      children: [
        Signature(
          controller: widget.signatureController,
          width: widget.width,
          height: widget.height,
          backgroundColor: clFFF4F4F4,
        ),
        Positioned(
          top: 0,
          child:  Container(
            height: 44, width: widget.height,
            color: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).padding.bottom+20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: (){
                    Navigator.pop(context);
                  },
                  child: Container(
                    width: 30,
                    child: Image.asset(ImageConstants.nav_back_balck, width: 25, height: 25),),
                ),
                GestureDetector(
                  onTap: () async {
                    Navigator.pop(context);
                    ByteData? bytes = await (
                        await widget.signatureController.toImage(
                            width: widget.height.ceil(),height: widget.width.ceil()
                        ))?.toByteData(format: ui.ImageByteFormat.png);
                    if (widget.drawComplete != null) {
                      widget.drawComplete!(bytes?.buffer.asUint8List());
                    }
                  },
                  child: Text('确定', style: TextStyle(color: clFF0BA198)),
                )
              ],
            ),
          ),
        ),
        // 暂无签名
        Offstage(
          offstage: isEmpty ? false : true,
          child: Text(
            '签名（必填）',
            style: TextStyle(
              fontSize: 44.sp,
              color: clFFE5E5E5,
            ),
          ),
        ),
        Positioned(
          right: 20, bottom: 40,
          child: Row(
            children: [
              GestureDetector(
                child: Row(
                  children: [
                    Image.asset(ImageConstants.ic_reset, width: 24, height: 24),
                    Text('清除', style: TextStyle(color: clFF0BA198, fontSize: 16))
                  ],
                ),
                onTap: () {
                  setState(() {
                    widget.signatureController.clear();
                  });
                },
              ),
            ],
          ),
        ),
        Positioned(
          bottom: 40,
          child: Text(
            '用手指签名，注意字迹清晰',
            style: TextStyle(
              fontSize: 16,
              color: clFF999999,
            ),
          ),
        )
      ],
    );
  }
}