Skip to content

Instantly share code, notes, and snippets.

@nkraev
Created March 14, 2018 18:25
Show Gist options
  • Save nkraev/408aa1264b82ae8ce1c0098a270e4f52 to your computer and use it in GitHub Desktop.
Save nkraev/408aa1264b82ae8ce1c0098a270e4f52 to your computer and use it in GitHub Desktop.
This gist shows the GestureDetector usage on latest dart 2 preview version
import 'package:flutter/material.dart';
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points;
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.black
..strokeCap = StrokeCap.round
..strokeWidth = 5.0;
for (int i = 0; i < points.length - 1; i++) {
if (points[i] != null && points[i + 1] != null)
canvas.drawLine(points[i], points[i + 1], paint);
}
}
bool shouldRepaint(SignaturePainter other) => other.points != points;
}
class Signature extends StatefulWidget {
SignatureState createState() => new SignatureState();
}
class SignatureState extends State<Signature> {
List<Offset> _points = <Offset>[];
Widget build(BuildContext context) {
return new Stack(
children: [
GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
setState(() {
_points = new List.from(_points)..add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),
),
CustomPaint(painter: new SignaturePainter(_points))
],
);
}
}
class DemoApp extends StatelessWidget {
Widget build(BuildContext context) => new Scaffold(body: new Signature());
}
void main() => runApp(new MaterialApp(home: new DemoApp()));
@Govardhanreact
Copy link

How to get the signature that I need to send on my server?

@Manukumar1995
Copy link

what about performance issue while drawing more points?

@busymilk
Copy link

busymilk commented Aug 9, 2018

line 19 other.points != points; allways false.

@AseemWangoo
Copy link

thanks for a delightful piece of code. One doubt, I am showing appBar and body in my app.
But after using appBar, my touch position gets shifted down.
If I remove appBar, then no problems, but I need the appBar.

@fantasyRqg
Copy link

when I draw fast , something goes wrong
image

@Amir-OffsureIt
Copy link

It's working fine on Full screen Container. But how to set bound within a Container?

@KeithMorning
Copy link

@Amir-OffsureIt do you find the answer?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment