Flutter手写签名插件syncfusion_flutter_signaturepad的使用

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

Flutter手写签名插件syncfusion_flutter_signaturepad的使用

插件简介

syncfusion_flutter_signaturepad

Syncfusion® Flutter SignaturePad 是一个用于捕捉平滑且更真实的签名的Dart库。你可以通过手指、笔或鼠标在平板电脑、触摸屏等设备上绘制自己的签名。此小部件还允许你将签名保存为图像,以便与需要签名的文档同步。

注意事项

这是一个商业包。要使用此包,你需要拥有 Syncfusion® 商业许可证或免费的 Syncfusion® 社区许可证。更多详情,请参阅LICENSE文件。

功能亮点

  • 丰富的自定义选项:设置最小和最大笔触宽度及笔触颜色,还可以设置SignaturePad的背景颜色。
  • 更逼真的手写效果:独特的笔触渲染算法基于绘图手势的速度以及最小和最大笔触厚度绘制签名,使签名看起来更加真实。
  • 保存为图像:将绘制的签名保存为图像,嵌入到文档、PDF或其他支持图像表示签名的地方。

安装

pub.dev安装最新版本。

使用示例

以下是一个完整的示例代码,展示了如何在Flutter应用中使用syncfusion_flutter_signaturepad

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

void main() {
  return runApp(SignaturePadApp());
}

/// 渲染SignaturePad widget
class SignaturePadApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SfSignaturePad Demo',
      home: _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  _MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<_MyHomePage> {
  final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();

  void _handleClearButtonPressed() {
    signatureGlobalKey.currentState!.clear();
  }

  void _handleSaveButtonPressed() async {
    final data =
        await signatureGlobalKey.currentState!.toImage(pixelRatio: 3.0);
    final bytes = await data.toByteData(format: ui.ImageByteFormat.png);
    await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) {
          return Scaffold(
            appBar: AppBar(),
            body: Center(
              child: Container(
                color: Colors.grey[300],
                child: Image.memory(bytes!.buffer.asUint8List()),
              ),
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            children: [
          Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                  child: SfSignaturePad(
                      key: signatureGlobalKey,
                      backgroundColor: Colors.white,
                      strokeColor: Colors.black,
                      minimumStrokeWidth: 1.0,
                      maximumStrokeWidth: 4.0),
                  decoration:
                      BoxDecoration(border: Border.all(color: Colors.grey)))),
          SizedBox(height: 10),
          Row(children: <Widget>[
            TextButton(
              child: Text('ToImage'),
              onPressed: _handleSaveButtonPressed,
            ),
            TextButton(
              child: Text('Clear'),
              onPressed: _handleClearButtonPressed,
            )
          ], mainAxisAlignment: MainAxisAlignment.spaceEvenly)
        ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center));
  }
}

更多资源

获取帮助和支持

如果你有任何问题,可以联系我们的Syncfusion®支持团队或在社区论坛上发帖提问。提交功能请求或bug报告可以通过我们的反馈门户

希望这个插件能帮助你在Flutter项目中实现流畅的手写签名功能!


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

1 回复

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


当然,以下是如何在Flutter项目中集成并使用syncfusion_flutter_signaturepad插件来实现手写签名功能的代码示例。

步骤 1: 添加依赖

首先,在你的pubspec.yaml文件中添加syncfusion_flutter_signaturepad依赖:

dependencies:
  flutter:
    sdk: flutter
  syncfusion_flutter_signaturepad: ^x.y.z  # 请替换为最新版本号

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

步骤 2: 导入包

在你的Dart文件中导入必要的包:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

步骤 3: 创建签名页面

接下来,创建一个新的页面或修改现有页面以包含签名板。以下是一个完整的示例页面:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';

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

class _SignaturePageState extends State<SignaturePage> {
  final SignaturePadController _controller = SignaturePadController();
  Uint8List? _signatureImage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('手写签名'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: SfSignaturePad(
                controller: _controller,
                strokeWidth: 2.0,
                strokeColor: Colors.black,
                backgroundColor: Colors.white,
                onSaved: (data) {
                  setState(() {
                    _signatureImage = data;
                  });
                },
              ),
            ),
            if (_signatureImage != null)
              Image.memory(_signatureImage!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final byteData = await _controller.save();
                setState(() {
                  _signatureImage = byteData;
                });
                // 你可以在这里处理保存或上传签名图像的逻辑
              },
              child: Text('保存签名'),
            ),
            ElevatedButton(
              onPressed: () {
                _controller.clear();
                setState(() {
                  _signatureImage = null;
                });
              },
              child: Text('清除签名'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 4: 路由到签名页面

最后,在你的主应用文件中(通常是main.dart),将SignaturePage添加到路由中:

import 'package:flutter/material.dart';
import 'signature_page.dart';  // 假设你的签名页面文件名为signature_page.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SignaturePage(),  // 直接将签名页面作为主页
      // 或者使用路由
      // initialRoute: '/',
      // routes: {
      //   '/': (context) => SignaturePage(),
      // },
    );
  }
}

注意事项

  1. 权限:如果你的应用需要保存签名图像到文件系统或上传到服务器,请确保你已经请求并处理了必要的权限。
  2. 依赖版本:请确保使用最新版本的syncfusion_flutter_signaturepad插件,因为插件的API可能会随着版本更新而变化。
  3. 自定义:你可以根据需求自定义签名板的外观和行为,例如调整笔触宽度、颜色等。

通过上述步骤,你应该能够在Flutter应用中成功集成并使用syncfusion_flutter_signaturepad插件来实现手写签名功能。

回到顶部