Créer `zone de signature» pour l'application mobile dans dart (flutter)

Question

Je veux créer une zone de signature comme Here avec dart dans une application mobile!

J'ai essayé d'utiliser la classe CustomPaint ... Mais cela ne fonctionne pas.

Quelqu'un peut-il m'aider?

Answer 1

Vous pouvez créer une zone de signature en utilisant GestureDetector pour enregistrer des touches et CustomPaint pour dessiner sur l'écran. Voici quelques conseils:

• Utilisez RenderBox.globalToLocal pour convertir le DragUpdateDetails fourni par GestureDetector.onPanUpdate en coordonnées relatives
• Utilisez un gestionnaire GestureDetector.onPanEnd geste pour enregistrer les pauses entre les coups.
• Mutation le même List ne déclenchera pas automatiquement un repeindre car les arguments constructeur CustomPainter sont les mêmes. Vous pouvez déclencher un repeint en créant un nouveau List chaque fois qu'un nouveau point est fourni. Utilisez Canvas.drawLine pour dessiner une ligne arrondie entre chacun des points enregistrés de la signature.

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()));