成果预览
与andorid极其类似,自定义一个CustomPainter 相当于控件
import 'package:flutter/material.dart';
/**
* 通过继承CustomPainter 自定义一个控件
*/
class SignaturePainter extends CustomPainter {
SignaturePainter(this.points);
final List<Offset> points; // Offset:一个不可变的2D浮点偏移。
void paint(Canvas canvas, Size size) {
Paint paint = new Paint() //设置笔的属性
..color = Colors.blue[200]
..strokeCap = StrokeCap.round
..isAntiAlias = true
..strokeWidth = 12.0
..strokeJoin = StrokeJoin.bevel;
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); //drawLine(Offset p1, Offset p2, Paint paint) → void
// canvas.drawOval(
// new Rect.fromCircle(center: points[i], radius: 20.0), paint);
canvas.drawOval(rect, paint)
// canvas.drawCircle(points[i], 20.0, paint);
}
}
/**
* 是否重绘
*/
bool shouldRepaint(SignaturePainter other) => other.points != points;
// bool shouldRepaint(SignaturePainter other) =>true;
}
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(//手势探测器,一个特殊的widget,想要给一个widge添加手势,直接用这货包裹起来
onPanUpdate: (DragUpdateDetails details) {//按下
RenderBox referenceBox = context.findRenderObject();
Offset localPosition =
referenceBox.globalToLocal(details.globalPosition);
setState(() {
_points = new List.from(_points)..add(localPosition);
// _points.add(localPosition);
});
},
onPanEnd: (DragEndDetails details) => _points.add(null),//抬起来
),
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()));