ダーツ（フラッター）でモバイルアプリの「署名エリア」を作成

Question

モバイルアプリケーションでダーツを使用してHereのような署名領域を作成したいと考えています。

私はCustomPaintクラスを使用しようとしました...しかし、動作しません。

誰でも手伝ってもらえますか？

Answer 1

GestureDetectorをタッチして記録し、CustomPaintを使用して署名領域を作成することができます。ここではいくつかのヒントがあります：

• 使用RenderBox.globalToLocalはストローク間の休憩を記録するためにGestureDetector.onPanEndジェスチャーハンドラを使用して相対座標
• にGestureDetector.onPanUpdateによって提供さDragUpdateDetails変換すること。
• 同じListを変更すると、CustomPainterコンストラクタの引数が同じであるため、自動的に再描画されません。新しいポイントが提供されるたびに、新しいListを作成して再描画をトリガーすることができます。
• Canvas.drawLineを使用して、署名の記録された各点の間に丸い線を描きます。

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