Flutter手写签名插件qonvex_signature_pad的使用

Flutter手写签名插件qonvex_signature_pad的使用

qonvex_signature_pad 是一个用于创建手写签名板的新 Flutter 包。该插件支持所有平台，包括桌面和网页。

注意事项

对于网页

当在网页上运行你的应用时，请在命令后添加 --dart-define=FLUTTER_WEB_AUTO_DETECT=true。

示例：

flutter run -d chrome --dart-define=FLUTTER_WEB_AUTO_DETECT=true

使用示例

以下是一个完整的示例代码，展示了如何使用 qonvex_signature_pad 插件。

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:qonvex_signature_pad/qonvex_signature_pad.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Qonvex Signature Pad Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Qonvex Signature Pad Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 获取 Base64 编码的签名数据
  void getBase64() async {
    String? _base64 = await _globalKey.currentState!.toBase64;
    print("BASE64 数据 : $_base64");
  }

  // 获取字节数据
  void getBytes() async {
    Uint8List? bytes = await _globalKey.currentState!.toBytes;
    print("字节数据 : $bytes");
  }

  // 清除签名点
  void clearPoints() async {
    _globalKey.currentState!.clearPoints();
  }

  // 定义全局键
  GlobalKey<QonvexSignaturePadState> _globalKey = GlobalKey<QonvexSignaturePadState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: QonvexSignaturePad(
        key: _globalKey,
        strokeCap: StrokeCap.round, // 设置笔画末端样式为圆形
        thickness: 5, // 设置笔画厚度
        signatureColor: Colors.red, // 设置签名颜色为红色
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包括一个带有签名功能的手写签名板。用户可以通过触摸屏幕来绘制签名，并通过点击按钮获取签名的 Base64 编码数据或字节数据。同时，还有一个按钮可以清除签名板上的所有签名点。


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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用qonvex_signature_pad插件的一个详细代码示例。这个插件允许你创建一个手写签名板。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加qonvex_signature_pad依赖：

dependencies:
  flutter:
    sdk: flutter
  qonvex_signature_pad: ^3.0.0  # 确保版本号是最新的

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

步骤 2: 导入插件

在你需要使用签名板的Dart文件中导入插件：

import 'package:qonvex_signature_pad/qonvex_signature_pad.dart';

步骤 3: 创建签名板

下面是一个完整的示例，展示如何在Flutter应用中创建一个签名板，并获取用户绘制的签名数据。

import 'package:flutter/material.dart';
import 'package:qonvex_signature_pad/qonvex_signature_pad.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Signature Pad Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SignatureScreen(),
    );
  }
}

class SignatureScreen extends StatefulWidget {
  @override
  _SignatureScreenState createState() => _SignatureScreenState();
}

class _SignatureScreenState extends State<SignatureScreen> {
  QonvexController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = QonvexController()
      ..clear()
      ..strokeColor = Colors.black
      ..strokeWidth = 5.0
      ..backgroundColor = Colors.white;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Signature Pad Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: QonvexSignaturePad(
                controller: _controller!,
                onClear: () {
                  // 当用户点击清除按钮时，这里可以执行一些操作
                  print('Signature cleared');
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 获取签名数据
                final dataUrl = _controller!.dataUrl;
                print('Signature data URL: $dataUrl');

                // 你可以将dataUrl保存或进行其他处理
              },
              child: Text('Get Signature'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 清除签名
                _controller!.clear();
              },
              child: Text('Clear Signature'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }
}

解释

  1. 依赖管理：在pubspec.yaml中添加依赖并运行flutter pub get。
  2. 导入插件：在需要使用的文件中导入qonvex_signature_pad。
  3. 创建签名板：
    • 使用QonvexController来管理签名板的状态。
    • 在initState中初始化控制器并设置一些默认参数，如线条颜色、线条宽度和背景颜色。
    • 使用QonvexSignaturePad组件来显示签名板，并绑定控制器。
    • 提供两个按钮来获取签名数据和清除签名。
  4. 资源释放：在dispose方法中释放控制器资源。

这个示例展示了如何集成和使用qonvex_signature_pad插件来创建一个简单的手写签名功能。你可以根据需要进一步自定义和扩展这个示例。

回到顶部