Flutter手写签名插件hand_signature的使用
Flutter手写签名插件hand_signature的使用
hand_signature 是一个Flutter插件，提供了一个平滑的手写签名板。该库完全用Dart/Flutter编写，支持所有平台。它易于使用，提供了多种绘制和导出设置，还支持SVG文件。
使用方法
引入包
首先，在你的pubspec.yaml文件中添加依赖：
dependencies:
hand_signature: ^最新版本号
然后在你的Dart文件中导入：
import 'package:hand_signature/signature.dart';
创建签名控件
HandSignatureControl 和 HandSignature 可以用来调整一些绘制属性，如笔画宽度、平滑比例或速度权重。
final control = HandSignatureControl(
threshold: 3.0, // 最小距离阈值
smoothRatio: 0.65, // 平滑比率
velocityRange: 2.0, // 速度范围
);
final widget = HandSignature(
control: control,
color: Colors.blueGrey, // 线条颜色
width: 1.0, // 最小笔画宽度
maxWidth: 10.0, // 最大笔画宽度
type: SignatureDrawType.shape, // 绘制类型
);
导出签名
可以将签名导出为不同的格式，如SVG、PNG等。
final svg = control.toSvg();
final png = control.toImage();
final json = control.toMap();
control.importData(json);
示例代码
以下是一个完整的示例代码，展示了如何使用hand_signature插件创建一个手写签名应用，并实现签名的清除和导出功能。
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hand_signature/signature.dart';
void main() => runApp(MyApp());
HandSignatureControl control = new HandSignatureControl(
threshold: 0.01,
smoothRatio: 0.65,
velocityRange: 2.0,
);
ValueNotifier<String?> svg = ValueNotifier<String?>(null);
ValueNotifier<ByteData?> rawImage = ValueNotifier<ByteData?>(null);
ValueNotifier<ByteData?> rawImageFit = ValueNotifier<ByteData?>(null);
class MyApp extends StatelessWidget {
bool get scrollTest => false;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Signature Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.orange,
body: scrollTest
? ScrollTest()
: SafeArea(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
child: Center(
child: AspectRatio(
aspectRatio: 2.0,
child: Stack(
children: <Widget>[
Container(
constraints: BoxConstraints.expand(),
color: Colors.white,
child: HandSignature(
control: control,
type: SignatureDrawType.shape,
),
),
CustomPaint(
painter: DebugSignaturePainterCP(
control: control,
cp: false,
cpStart: false,
cpEnd: false,
),
),
],
),
),
),
),
Row(
children: <Widget>[
CupertinoButton(
onPressed: () {
control.clear();
svg.value = null;
rawImage.value = null;
rawImageFit.value = null;
},
child: Text('clear'),
),
CupertinoButton(
onPressed: () async {
svg.value = control.toSvg(
color: Colors.blueGrey,
type: SignatureDrawType.shape,
fit: true,
);
rawImage.value = await control.toImage(
color: Colors.blueAccent,
background: Colors.greenAccent,
fit: false,
);
rawImageFit.value = await control.toImage(
color: Colors.black,
fit: true,
);
},
child: Text('export'),
),
],
),
SizedBox(
height: 16.0,
),
],
),
Align(
alignment: Alignment.bottomRight,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_buildImageView(),
_buildScaledImageView(),
_buildSvgView(),
],
),
),
],
),
),
),
);
}
Widget _buildImageView() => Container(
width: 192.0,
height: 96.0,
decoration: BoxDecoration(
border: Border.all(),
color: Colors.white30,
),
child: ValueListenableBuilder<ByteData?>(
valueListenable: rawImage,
builder: (context, data, child) {
if (data == null) {
return Container(
color: Colors.red,
child: Center(
child: Text('not signed yet (png)\nscaleToFill: false'),
),
);
} else {
return Padding(
padding: EdgeInsets.all(8.0),
child: Image.memory(data.buffer.asUint8List()),
);
}
},
),
);
Widget _buildScaledImageView() => Container(
width: 192.0,
height: 96.0,
decoration: BoxDecoration(
border: Border.all(),
color: Colors.white30,
),
child: ValueListenableBuilder<ByteData?>(
valueListenable: rawImageFit,
builder: (context, data, child) {
if (data == null) {
return Container(
color: Colors.red,
child: Center(
child: Text('not signed yet (png)\nscaleToFill: true'),
),
);
} else {
return Container(
padding: EdgeInsets.all(8.0),
color: Colors.orange,
child: Image.memory(data.buffer.asUint8List()),
);
}
},
),
);
Widget _buildSvgView() => Container(
width: 192.0,
height: 96.0,
decoration: BoxDecoration(
border: Border.all(),
color: Colors.white30,
),
child: ValueListenableBuilder<String?>(
valueListenable: svg,
builder: (context, data, child) {
if (data == null) {
return Container(
color: Colors.red,
child: Center(
child: Text('not signed yet (svg)'),
),
);
}
return Padding(
padding: EdgeInsets.all(8.0),
child: SvgPicture.string(
data,
placeholderBuilder: (_) => Container(
color: Colors.lightBlueAccent,
child: Center(
child: Text('parsing data(svg)'),
),
),
),
);
},
),
);
}
通过以上步骤，你可以轻松地在Flutter项目中集成手写签名功能，并根据需要进行自定义和扩展。希望这个示例能帮助你更好地理解和使用hand_signature插件！
更多关于Flutter手写签名插件hand_signature的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter手写签名插件hand_signature的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成和使用hand_signature插件来实现手写签名功能的示例代码。hand_signature是一个允许用户在屏幕上绘制签名的Flutter插件。
1. 添加依赖
首先，在你的pubspec.yaml文件中添加hand_signature插件的依赖：
dependencies:
flutter:
sdk: flutter
hand_signature: ^最新版本号 # 请替换为实际可用的最新版本号
然后运行flutter pub get来安装依赖。
2. 导入插件
在你的Flutter项目的Dart文件中（例如main.dart），导入hand_signature插件：
import 'package:flutter/material.dart';
import 'package:hand_signature/hand_signature.dart';
3. 创建签名页面
接下来，创建一个包含签名功能的页面。以下是一个完整的示例，展示了如何集成和使用hand_signature插件：
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 GlobalKey<HandSignatureState> _signatureKey = GlobalKey();
List<List<Offset>> _signatures = [];
void _clearSignature() {
_signatureKey.currentState?.clear();
}
void _saveSignature() {
setState(() {
_signatures = _signatureKey.currentState?.signatures ?? [];
});
// 这里可以添加将签名保存到文件或服务器的代码
print('Saved signatures: $_signatures');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hand Signature Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: HandSignature(
key: _signatureKey,
backgroundColor: Colors.white,
strokeColor: Colors.black,
strokeWidth: 5.0,
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: _clearSignature,
child: Text('Clear'),
),
ElevatedButton(
onPressed: _saveSignature,
child: Text('Save'),
),
],
),
],
),
),
);
}
}
4. 运行应用
确保你的开发环境已经设置好，然后运行你的Flutter应用：
flutter run
功能说明
- 签名区域：使用
HandSignature组件来创建签名区域。 - 清除签名：点击“Clear”按钮将清除签名区域中的内容。
- 保存签名：点击“Save”按钮将获取签名数据并打印到控制台（你可以根据需要将其保存到文件或服务器）。
这个示例展示了如何使用hand_signature插件来实现基本的手写签名功能。你可以根据需要进一步自定义和扩展此功能。
