Erstellen Sie "Signaturbereich" für mobile App in Dart (Flattern)

Question

Ich möchte einen Signaturbereich wie Here mit Dart in einer mobilen App erstellen!

Ich habe versucht, die CustomPaint Klasse zu verwenden ... Aber es funktioniert nicht.

Kann mir jemand helfen?

Answer 1

Sie können einen Signaturbereich unter Verwendung von GestureDetector zum Aufzeichnen von Berührungen und CustomPaint zum Zeichnen auf dem Bildschirm erstellen. Hier sind ein paar Tipps:

• Verwenden RenderBox.globalToLocal die DragUpdateDetails durch GestureDetector.onPanUpdate in relativen Koordinaten
• Verwenden Sie eine GestureDetector.onPanEnd Geste Handler zur Verfügung gestellt konvertieren, um die Pausen zwischen den Schlägen aufzunehmen.
• Das Mutieren desselben List wird nicht automatisch ein Repaint auslösen, da die Konstruktorargumentegleich sind. Sie können ein Repaint auslösen, indem Sie jedes Mal, wenn ein neuer Punkt bereitgestellt wird, einen neuen List erstellen.
• Verwenden Sie Canvas.drawLine, um eine gerundete Linie zwischen jedem der aufgezeichneten Punkte der Signatur zu zeichnen.

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 GestureDetector(
     onPanUpdate: (DragUpdateDetails details) { 
     setState(() { 
      RenderBox referenceBox = context.findRenderObject(); 
      Offset localPosition = 
      referenceBox.globalToLocal(details.globalPosition); 
      _points = new List.from(_points)..add(localPosition); 
     }); 
     }, 
     onPanEnd: (DragEndDetails details) => _points.add(null), 
     child: new 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()));