Flutter 绘制集录: 让头像动起来

---

在 Flutter 中，我们可以使用自定义绘制小部件 (CustomPainter) 来创建各种各样的图形和图像。这篇文章将向您展示如何使用 CustomPainter 来创建随机对称点头像。

首先，我们需要创建一个 PortraitPainter 类，它继承自 CustomPainter。在这个类中，我们将定义如何绘制头像。

class PortraitPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制头像的代码
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在 paint() 方法中，我们可以使用 Canvas 对象来绘制头像。我们可以使用各种不同的方法来绘制图像，例如 drawLine()、drawRect()、drawCircle() 等。

为了让头像动起来，我们需要使用动画。我们可以使用 AnimationController 来控制动画的进度。

class PortraitPainter extends CustomPainter {
  final Animation<double> animation;

  PortraitPainter(this.animation) : super(repaint: animation);

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制头像的代码
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在 shouldRepaint() 方法中，我们需要返回 true，以指示每次动画帧都需要重新绘制小部件。

最后，我们需要在 Flutter 应用程序中使用 PortraitPainter。我们可以创建一个 CustomPaint 小部件，并将其添加到应用程序的 UI 中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            painter: PortraitPainter(
              AnimationController(
                duration: const Duration(seconds: 1),
                vsync: this,
              )..repeat(),
            ),
          ),
        ),
      ),
    );
  }
}

运行应用程序后，您将看到一个随机对称点头像。您可以尝试修改 PortraitPainter 类中的代码，以创建不同的头像。

希望这篇文章对您有所帮助。如果您有任何问题，请随时与我联系。