Create `signature area` for mobile app in dart (flutter) [closed] Create `signature area` for mobile app in dart (flutter) [closed] flutter flutter

Create `signature area` for mobile app in dart (flutter) [closed]


You can create a signature area using GestureDetector to record touches and CustomPaint to draw on the screen. Here are a few tips:

video

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: SignaturePainter(_points), size: Size.infinite),      ],    );  }}class DemoApp extends StatelessWidget {  Widget build(BuildContext context) => new Scaffold(body: new Signature());}void main() => runApp(new MaterialApp(home: new DemoApp()));