Flutter手写签名功能插件flutter_signature_package的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter手写签名功能插件flutter_signature_package的使用

签名画布

一个用于在画布上绘制签名的 Flutter 包。该包提供了基于用户输入手势绘制平滑线条的功能。

特性

  • 在画布上绘制平滑线条。
  • 撤销和重做绘图操作。
  • 清除画布。
  • 导出绘制的签名作为 PNG 字节。
  • 自定义画布上的笔划宽度。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter_signature_package:
    git:
      url: https://github.com/Dojibery/flutter-signature-package

使用

在 Dart 文件中导入包:

import 'package:my_signature_package/flutter_signature_package.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('签名画布示例'),
          ),
          body: SafeArea(
            child: Column(
              children: [
                Expanded(child: SignatureCanvas()),
                ActionButtons(),
              ],
            ),
          ),
        ),
    );
  }
}

解释

  • SignatureCanvas: 基于用户输入绘制签名的部件。

示例

基本用法

class MySignaturePage extends StatelessWidget {
  final SignatureCanvasController signatureCanvasController = SignatureCanvasController();

  void _handleSave(Uint8List pngBytes) {
    // 处理保存的 PNG 字节
    print('保存的 PNG 字节: $pngBytes');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('签名')),
      body: Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: SignatureCanvas(
                  backgroundColor: Colors.white,
                  controller: signatureCanvasController,
                  onSave: _handleSave,
                  strokeWidth: 3.0,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Icon(Icons.undo),
                    onPressed: () {
                      signatureCanvasController.undo();
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.redo),
                    onPressed: () {
                      signatureCanvasController.redo();
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      signatureCanvasController.clearAll();
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.save),
                    onPressed: () {
                      signatureCanvasController.exportDrawing();
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

保存签名作为 PNG 字节

SignatureCanvas(
  onSave: (Uint8List pngBytes) {
    // 处理保存的 PNG 字节
    print('保存的 PNG 字节: $pngBytes');
  },
)

更多关于Flutter手写签名功能插件flutter_signature_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter手写签名功能插件flutter_signature_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中使用flutter_signature_package插件来实现手写签名功能的示例代码。这个插件允许用户在屏幕上绘制签名并保存为图像。

首先,确保你已经在pubspec.yaml文件中添加了flutter_signature_package依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_signature_package: ^最新版本号  # 请替换为当前最新版本号

然后运行flutter pub get来安装依赖。

接下来,你可以按照以下步骤在你的Flutter应用中使用这个插件:

  1. 导入包

在你的Dart文件中导入flutter_signature_package

import 'package:flutter/material.dart';
import 'package:flutter_signature_package/flutter_signature_package.dart';
  1. 创建签名页面

创建一个新的页面或组件,用于显示签名画板。

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

class _SignaturePageState extends State<SignaturePage> {
  final GlobalKey<SignatureState> _signatureKey = GlobalKey<SignatureState>();

  void _clear() {
    _signatureKey.currentState?.clear();
  }

  void _save() async {
    Uint8List? pngBytes = await _signatureKey.currentState?.saveImage() as Uint8List?;
    if (pngBytes != null) {
      // 你可以在这里将pngBytes保存到文件或上传到服务器
      print('Signature saved!');
      // 示例:将签名保存为文件
      final directory = (await getApplicationDocumentsDirectory()).path;
      final path = '$directory/signature.png';
      File file = File(path);
      await file.writeAsBytes(pngBytes);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('手写签名'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Signature(
                key: _signatureKey,
                backgroundColor: Colors.white,
                penColor: Colors.black,
                strokeWidth: 5.0,
              ),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _clear,
                  child: Text('清除'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _save,
                  child: Text('保存'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
  1. 在应用中导航到签名页面

确保你有一个导航机制来打开这个签名页面。例如,在你的主页面或任何需要的地方添加导航按钮。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Signature Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SignaturePage()),
            );
          },
          child: Text('去签名'),
        ),
      ),
    );
  }
}

以上代码展示了如何使用flutter_signature_package插件在Flutter应用中实现手写签名功能,包括绘制签名、清除签名和保存签名。请确保你替换了flutter_signature_package的依赖版本号为当前最新版本号。

回到顶部