问题描述
我正在尝试从用户那里收集签名并将其保存到图像中。我已经做得足够远,可以在屏幕上绘画了,但是现在我想单击一个按钮以保存到图像并存储在数据库中。
解决方法
在扑打中,您可以使用签名板:
- 将以下依赖项添加到pubspec.yaml文件中:
flutter_signature_pad: ^2.0.2
供参考,请点击signature pad链接。
import 'dart:convert';
import 'dart:math';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_signature_pad/flutter_signature_pad.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,),home: MyHomePage(),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _WatermarkPaint extends CustomPainter {
final String price;
final String watermark;
_WatermarkPaint(this.price,this.watermark);
@override
void paint(ui.Canvas canvas,ui.Size size) {
canvas.drawCircle(Offset(size.width / 2,size.height / 2),10.8,Paint()..color = Colors.blue);
}
@override
bool shouldRepaint(_WatermarkPaint oldDelegate) {
return oldDelegate != this;
}
@override
bool operator ==(Object other) =>
identical(this,other) || other is _WatermarkPaint && runtimeType == other.runtimeType && price == other.price && watermark == other.watermark;
@override
int get hashCode => price.hashCode ^ watermark.hashCode;
}
class _MyHomePageState extends State<MyHomePage> {
ByteData _img = ByteData(0);
var color = Colors.red;
var strokeWidth = 5.0;
final _sign = GlobalKey<SignatureState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),child: Signature(
color: color,key: _sign,onSign: () {
final sign = _sign.currentState;
debugPrint('${sign.points.length} points in the signature');
},backgroundPainter: _WatermarkPaint("2.0","2.0"),strokeWidth: strokeWidth,color: Colors.black12,_img.buffer.lengthInBytes == 0 ? Container() : LimitedBox(maxHeight: 200.0,child: Image.memory(_img.buffer.asUint8List())),Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
MaterialButton(
color: Colors.green,onPressed: () async {
final sign = _sign.currentState;
//retrieve image data,do whatever you want with it (send to server,save locally...)
final image = await sign.getData();
var data = await image.toByteData(format: ui.ImageByteFormat.png);
sign.clear();
final encoded = base64.encode(data.buffer.asUint8List());
setState(() {
_img = data;
});
debugPrint("onPressed " + encoded);
},child: Text("Save")),MaterialButton(
color: Colors.grey,onPressed: () {
final sign = _sign.currentState;
sign.clear();
setState(() {
_img = ByteData(0);
});
debugPrint("cleared");
},child: Text("Clear")),],Row(
mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
MaterialButton(
onPressed: () {
setState(() {
color = color == Colors.green ? Colors.red : Colors.green;
});
debugPrint("change color");
},child: Text("Change color")),MaterialButton(
onPressed: () {
setState(() {
int min = 1;
int max = 10;
int selection = min + (Random().nextInt(max - min));
strokeWidth = selection.roundToDouble();
debugPrint("change stroke width to $selection");
});
},child: Text("Change stroke width")),)
],);
}
}