Flutter动画：用Flutter来实现一个拍手动画

在Flutter中实现一个拍手绘画的功能，可以使用CustomPainter来绘制图形，并使用GestureDetector来监听用户的触摸事件以便进行绘制。以下是一个简单的例子：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SignatureScreen(),
        ),
      ),
    );
  }
}
 
class SignatureScreen extends StatefulWidget {
  @override
  _SignatureScreenState createState() => _SignatureScreenState();
}
 
class _SignatureScreenState extends State<SignatureScreen> {
  final List<Offset> _points = [];
 
  void _addPoint(Offset point) {
    setState(() {
      _points.add(point);
    });
  }
 
  void _clear() {
    setState(() {
      _points.clear();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) => _addPoint(details.globalPosition),
      onTapUp: (TapUpDetails details) => _addPoint(details.globalPosition),
      onTapCancel: () => _clear(),
      child: CustomPaint(
        painter: SignaturePainter(_points),
      ),
    );
  }
}
 
class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
 
  final List<Offset> points;
 
  @override
  void paint(Canvas canvas, Size size) {
    var paint = 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);
      }
    }
  }
 
  @override
  bool shouldRepaint(SignaturePainter oldDelegate) {
    return oldDelegate.points != points;
  }
}

这段代码定义了一个名为SignatureScreen的有状态Widget，它使用GestureDetector来监听触摸事件，并在用户触摸时更新一个_points列表。_SignatureScreenState还有一个_addPoint方法，该方法将用户的触摸点添加到列表中。

SignaturePainter是一个CustomPainter，它使用Canvas来绘制_points列表中的点，将它们连成一条线。当points列表发生变化时，shouldRepaint返回true，触发重绘。