Flutter手写签名插件reactive

Flutter手写签名插件reactive_signature的使用

reactive_signature 是一个用于在 Flutter 中实现手写签名功能的插件。它基于 Signature 插件，并与 reactive_forms 集成，以便更方便地处理表单验证和数据绑定。

使用步骤

添加依赖 在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  reactive_forms: ^latest_version
  reactive_signature: ^latest_version

导入必要的库 在你的 Dart 文件中导入以下库：

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_signature/reactive_signature.dart';

构建表单 创建一个表单并定义用于存储签名数据的表单控件。

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

  FormGroup buildForm() => fb.group({
        'signature': FormControl<Uint8List>(), // 用于存储签名的字节数据
      });

创建UI 构建一个包含签名区域和提交按钮的 UI。

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),
    home: Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          padding: const EdgeInsets.symmetric(
            horizontal: 20.0,
            vertical: 20.0,
          ),
          child: ReactiveFormBuilder(
            form: buildForm,
            builder: (context, form, child) {
              return Column(
                children: [
                  ReactiveSignature<Uint8List>(
                    height: 200, // 签名区域的高度
                    backgroundColor: Colors.grey, // 背景色
                    formControlName: 'signature', // 绑定到表单控件
                    decoration: const InputDecoration(
                      labelText: '签名', // 标签文本
                      border: OutlineInputBorder(), // 输入框边框样式
                      helperText: '', // 帮助文本
                    ),
                  ),
                  const SizedBox(height: 16), // 空白间距
                  ElevatedButton(
                    child: const Text('提交'), // 按钮文本
                    onPressed: () {
                      if (form.valid) { // 表单验证
                        // 打印表单值
                        // ignore: avoid_print
                        print(form.value);
                      } else {
                        form.markAllAsTouched(); // 触发所有表单字段的验证
                      }
                    },
                  ),
                ],
              );
            },
          ),
        ),
      ),
    ),
  );
}

完整示例代码

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_signature/reactive_signature.dart';

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

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

  FormGroup buildForm() => fb.group({
        'signature': FormControl<Uint8List>(), // 用于存储签名的字节数据
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
              vertical: 20.0,
            ),
            child: ReactiveFormBuilder(
              form: buildForm,
              builder: (context, form, child) {
                return Column(
                  children: [
                    ReactiveSignature<Uint8List>(
                      height: 200, // 签名区域的高度
                      backgroundColor: Colors.grey, // 背景色
                      formControlName: 'signature', // 绑定到表单控件
                      decoration: const InputDecoration(
                        labelText: '签名', // 标签文本
                        border: OutlineInputBorder(), // 输入框边框样式
                        helperText: '', // 帮助文本
                      ),
                    ),
                    const SizedBox(height: 16), // 空白间距
                    ElevatedButton(
                      child: const Text('提交'), // 按钮文本
                      onPressed: () {
                        if (form.valid) { // 表单验证
                          // 打印表单值
                          // ignore: avoid_print
                          print(form.value);
                        } else {
                          form.markAllAsTouched(); // 触发所有表单字段的验证
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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

itying888 1楼•3 天前

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

当然，下面是一个关于如何在Flutter项目中使用reactive_signature插件来实现手写签名功能的示例代码。这个插件允许用户在一个画布上进行签名，并且可以获取签名作为图像或SVG数据。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  reactive_signature: ^2.0.0  # 请检查最新版本号

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

2. 导入插件

在你的Dart文件中导入reactive_signature：

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

3. 创建签名页面

下面是一个完整的示例，展示如何在Flutter应用中实现一个签名页面，用户可以签名并清除签名，以及将签名保存为图像或SVG数据。

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

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

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

class _SignaturePageState extends State<SignaturePage> {
  final ReactiveSignatureController _controller = ReactiveSignatureController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Signature Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: ReactiveSignature(
                controller: _controller,
                backgroundColor: Colors.white,
                penColor: Colors.black,
                penStrokeWidth: 5.0,
                clearButton: ReactiveSignatureClearButton(
                  color: Colors.grey,
                  icon: Icons.clear,
                ),
              ),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () async {
                // 获取签名作为图像
                Uint8List imageBytes = await _controller.toPngBytes();
                // 这里你可以将imageBytes保存或显示，例如使用Image.memory(imageBytes)
                print('Image bytes length: ${imageBytes.length}');
              },
              child: Text('Save as Image'),
            ),
            SizedBox(height: 8.0),
            ElevatedButton(
              onPressed: () async {
                // 获取签名作为SVG
                String svgData = await _controller.toSvgData();
                // 这里你可以将svgData保存或显示，例如使用SvgPicture.string(svgData)
                print('SVG Data: $svgData');
              },
              child: Text('Save as SVG'),
            ),
            SizedBox(height: 8.0),
            ElevatedButton(
              onPressed: () {
                // 清除签名
                _controller.clear();
              },
              child: Text('Clear Signature'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

将上述代码添加到你的Flutter项目中，然后运行应用。你应该能够看到一个签名画布，以及几个按钮用于保存签名（作为图像或SVG）和清除签名。

这个示例展示了如何使用reactive_signature插件的基本功能。根据你的需求，你可以进一步自定义和扩展这个示例。