web-dev-qa-db-ja.com

Dartでモバイルアプリの「署名領域」を作成する（フラッター）

モバイルアプリでDartを使用して Here のような署名領域を作成したいです！

CustomPaint クラスを使用しようとしました...しかし、機能しません。

誰か助けてもらえますか？

mobiledartsignatureflutter
4
Jona

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

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

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()));
46
Collin Jackson