在 dart (flutter) 中为移动应用创建“签名区域" [英] Create `signature area` for mobile app in dart (flutter)

问题描述

我想创建一个签名区域，比如

import 'package:flutter/material.dart';类 SignaturePainter 扩展 CustomPainter {SignaturePainter(this.points);最终列表<Offset>积分；无效油漆(帆布画布，尺寸大小){油漆油漆 = 新油漆()..color = Colors.black..strokeCap = StrokeCap.round..strokeWidth = 5.0;for (int i = 0; i other.points != 点数；}class Signature 扩展 StatefulWidget {SignatureState createState() =>新的签名状态()；}类 SignatureState 扩展了 State{列表<偏移>_points = <偏移>[];小部件构建(BuildContext 上下文){返回新堆栈(孩子们: [手势检测器(onPanUpdate:(DragUpdateDetails 详细信息){RenderBox referenceBox = context.findRenderObject();偏移localPosition =referenceBox.globalToLocal(details.globalPosition);设置状态((){_points = new List.from(_points)..add(localPosition);});},onPanEnd:(DragEndDetails 详细信息)=>_points.add(null),),CustomPaint(画家:SignaturePainter(_points)，大小:Size.infinite)，],);}}class DemoApp 扩展 StatelessWidget {小部件构建(BuildContext 上下文)=>新脚手架(主体:新签名())；}void main() =>runApp(new MaterialApp(home: new DemoApp()));

i want to create a signature area like Here with dart in a mobile app!

I tried to use the CustomPaint class ... But it doesn't work.

Can anyone help me?

解决方案

You can create a signature area using GestureDetector to record touches and CustomPaint to draw on the screen. Here are a few tips:

• Use RenderBox.globalToLocal to convert the DragUpdateDetails provided by GestureDetector.onPanUpdate into relative coordinates
• Use a GestureDetector.onPanEnd gesture handler to record the breaks between strokes.
• Mutating the same List won't automatically trigger a repaint because the CustomPainter constructor arguments are the same. You can trigger a repaint by creating a new List each time a new point is provided.
• Use Canvas.drawLine to draw a rounded line between each of the recorded points of the 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 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) 中为移动应用创建“签名区域"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！