From 55421fd0887f5c87c09ac82bb8bcffde635b6df6 Mon Sep 17 00:00:00 2001 From: William Terrill Date: Sun, 26 Apr 2020 00:11:28 -0500 Subject: [PATCH 1/2] changed main.dart to work on both android and ios as well as flutter web. Also added image package to pubspec.yaml --- example/lib/main.dart | 87 ++++++++++++++++++++++++++++++++++--------- example/pubspec.yaml | 2 + 2 files changed, 72 insertions(+), 17 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 18bfff3..e826d7f 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,15 +1,19 @@ -import 'dart:convert'; -import 'dart:math'; -import 'dart:typed_data'; +// 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'; +import 'dart:math'; +import 'dart:typed_data'; +import 'package:image/image.dart' as img; void main() async { WidgetsFlutterBinding.ensureInitialized(); - await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]); + await SystemChrome.setPreferredOrientations( + [DeviceOrientation.landscapeLeft]); runApp(MyApp()); } @@ -41,7 +45,8 @@ class _WatermarkPaint extends CustomPainter { @override void paint(ui.Canvas canvas, ui.Size size) { - canvas.drawCircle(Offset(size.width / 2, size.height / 2), 10.8, Paint()..color = Colors.blue); + canvas.drawCircle(Offset(size.width / 2, size.height / 2), 10.8, + Paint()..color = Colors.blue); } @override @@ -51,14 +56,18 @@ class _WatermarkPaint extends CustomPainter { @override bool operator ==(Object other) => - identical(this, other) || other is _WatermarkPaint && runtimeType == other.runtimeType && price == other.price && watermark == other.watermark; + 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 { - ByteData _img = ByteData(0); + Uint8List finalImage = null; var color = Colors.red; var strokeWidth = 5.0; final _sign = GlobalKey(); @@ -86,7 +95,11 @@ class _MyHomePageState extends State { color: Colors.black12, ), ), - _img.buffer.lengthInBytes == 0 ? Container() : LimitedBox(maxHeight: 200.0, child: Image.memory(_img.buffer.asUint8List())), + finalImage == null + ? Container() + : LimitedBox( + maxHeight: 200.0, + child: Image.memory(finalImage.buffer.asUint8List())), Column( children: [ Row( @@ -95,16 +108,55 @@ class _MyHomePageState extends State { 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); + SignatureState sign = _sign.currentState; + int lineColor = + img.getColor(color.red, color.green, color.blue); + int backColor = img.getColor(255, 255, 255); + int imageWidth; + int imageHeight; + BuildContext currentContext = _sign.currentContext; + if (currentContext != null) { + var box = + currentContext.findRenderObject() as RenderBox; + imageWidth = box.size.width.toInt(); + imageHeight = box.size.height.toInt(); + } + + // create the image with the given size + img.Image signatureImage = + img.Image(imageWidth, imageHeight); + + // set the image background color + // remove this for a transparent background + img.fill(signatureImage, backColor); + + for (int i = 0; i < sign.points.length - 1; i++) { + if (sign.points[i] != null && + sign.points[i + 1] != null) { + img.drawLine( + signatureImage, + sign.points[i].dx.toInt(), + sign.points[i].dy.toInt(), + sign.points[i + 1].dx.toInt(), + sign.points[i + 1].dy.toInt(), + lineColor, + thickness: 3); + } else if (sign.points[i] != null && + sign.points[i + 1] == null) { + // draw the point to the image + img.drawPixel( + signatureImage, + sign.points[i].dx.toInt(), + sign.points[i].dy.toInt(), + lineColor); + } + } sign.clear(); - final encoded = base64.encode(data.buffer.asUint8List()); setState(() { - _img = data; + finalImage = + img.encodePng(signatureImage) as Uint8List; }); - debugPrint("onPressed " + encoded); + debugPrint("onPressed "); }, child: Text("Save")), MaterialButton( @@ -113,7 +165,7 @@ class _MyHomePageState extends State { final sign = _sign.currentState; sign.clear(); setState(() { - _img = ByteData(0); + finalImage = null; }); debugPrint("cleared"); }, @@ -126,7 +178,8 @@ class _MyHomePageState extends State { MaterialButton( onPressed: () { setState(() { - color = color == Colors.green ? Colors.red : Colors.green; + color = + color == Colors.green ? Colors.red : Colors.green; }); debugPrint("change color"); }, diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 3a31a56..f7036b0 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -21,6 +21,7 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 + image: ^2.1.12 dev_dependencies: flutter_test: @@ -37,6 +38,7 @@ flutter: # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true + # To add assets to your application, add an assets section, like this: # assets: From 09e1b4a06e38230eaaca28766647482565c1c4b6 Mon Sep 17 00:00:00 2001 From: William Terrill Date: Sun, 26 Apr 2020 00:16:46 -0500 Subject: [PATCH 2/2] cleaned up comments --- example/lib/main.dart | 3 --- 1 file changed, 3 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index e826d7f..0103931 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,6 +1,3 @@ -// import 'dart:convert'; -// import 'dart:math'; -// import 'dart:typed_data'; import 'dart:ui' as ui; import 'package:flutter/material.dart';