Flutter数字签名插件digital_signature_flutter的使用

digital_signature_flutter 是一个用于通过绘制手势捕获签名的库。你可以使用手指、笔或鼠标在平板电脑、触摸屏等设备上绘制自己的签名。该插件还允许你将签名保存为图像。

使用方法

创建一个新的Flutter项目

1. 打开一个Flutter项目，编辑 pubspec.yaml 文件，添加以下依赖：

   dependencies:
     digital_signature_flutter: ^0.0.3
   

2. 运行 flutter pub get 来获取依赖。

创建数字签名类

1. 在 lib 目录下创建一个新的Dart文件，例如 digital_signature.dart。

2. 在这个文件中定义一个 DigitalSignature 类，并初始化一个 SignatureController。这个控制器包含签名点、笔宽和笔颜色，允许你与签名小部件交互。

   import 'package:digital_signature_flutter/digital_signature_flutter.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter/services.dart';
   
   class DigitalSignature extends StatefulWidget {
     const DigitalSignature({Key? key}) : super(key: key);
   
     @override
     State<DigitalSignature> createState() => _DigitalSignatureState();
   }
   
   class _DigitalSignatureState extends State<DigitalSignature> {
     SignatureController? controller;
     Uint8List? signature;
   
     @override
     void initState() {
       controller = SignatureController(penStrokeWidth: 2, penColor: Colors.black);
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text('Digital Signature'),
         ),
         body: SingleChildScrollView(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               const SizedBox(height: 15),
               const Text('Please put the signature here', style: TextStyle(fontSize: 20, color: Colors.black)),
               const SizedBox(height: 15),
               Card(
                 child: Center(
                   child: Signature(
                     height: 200,
                     width: 350,
                     controller: controller!,
                     backgroundColor: Colors.white,
                   ),
                 ),
               ),
               buttonWidgets(context)!,
               const SizedBox(height: 30),
               signature != null
                   ? Column(
                       children: [
                         Center(child: Image.memory(signature!)),
                         const SizedBox(height: 10),
                         MaterialButton(
                           color: Colors.green,
                           onPressed: () {},
                           child: const Text("Submit", style: TextStyle(fontSize: 12)),
                         )
                       ],
                     )
                   : Container(),
               const SizedBox(height: 30),
             ],
           ),
         ),
       );
     }
   
     Widget? buttonWidgets(BuildContext context) {
       return Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
           TextButton(
             onPressed: () async {
               if (controller!.isNotEmpty) {
                 final sign = await exportSignature();
                 setState(() {
                   signature = sign;
                 });
               } else {
                 // 显示提示信息，例如 "Please put your signature"
               }
             },
             child: const Text("Preview", style: TextStyle(fontSize: 20, color: Colors.green)),
           ),
           TextButton(
             onPressed: () {
               controller?.clear();
               setState(() {
                 signature = null;
               });
             },
             child: const Text("Cancel", style: TextStyle(fontSize: 20, color: Colors.red)),
           ),
         ],
       );
     }
   
     Future<Uint8List?> exportSignature() async {
       final exportController = SignatureController(
         penStrokeWidth: 2,
         exportBackgroundColor: Colors.white,
         penColor: Colors.black,
         points: controller!.points,
       );
   
       final signature = exportController.toPngBytes();
   
       // 清理内存
       exportController.dispose();
   
       return signature;
     }
   
     @override
     void dispose() {
       controller!.dispose();
       super.dispose();
     }
   }
   

主应用入口

在 main.dart 文件中，创建并运行 MyApp，并在其中使用 DigitalSignature 组件。

import 'package:flutter/material.dart';
import 'digital_signature.dart'; // 引入上面创建的数字签名类

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Digital Signature',
      home: DigitalSignature(),
    );
  }
}

运行项目

1. 确保你已经安装了所有依赖项。
2. 运行 flutter run 命令启动你的应用。

现在，你应该能够在一个Flutter应用中使用 digital_signature_flutter 插件来捕获和预览数字签名。