在 dart (flutter) 中为移动应用程序创建“签名区”

Question

我想在移动应用中用飞镖创建一个类似 Here 的签名区！

我尝试使用 CustomPaint class ...但是它不起作用。

谁能帮帮我？

Answer 1

您可以使用GestureDetector to record touches and CustomPaint在屏幕上绘图来创建签名区。这里有一些提示：

用RenderBox.globalToLocal to convert the DragUpdateDetails provided by GestureDetector.onPanUpdate转化为相对坐标
使用 GestureDetector.onPanEnd 手势处理程序记录笔划之间的中断。
改变相同的 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 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()));

在 dart (flutter) 中为移动应用程序创建“签名区”

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

mobile

signature

dart

flutter