GestureDetector
を使用してタッチを記録し、 CustomPaint
を使用して画面に描画することにより、署名領域を作成できます。ここにいくつかのヒントがあります:
RenderBox.globalToLocal
変換するには DragUpdateDetails
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()));