flutter的custompaint组件示例6

这段代码是一个Flutter应用程序，它创建了一个动态的艺术效果，其中包含随机颜色的点在屏幕上不断更新位置。

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic Art Example'),
        ),
        body: DynamicArtWidget(),
      ),
    );
  }
}

class DynamicArtWidget extends StatefulWidget {
  @override
  _DynamicArtWidgetState createState() => _DynamicArtWidgetState();
}

class _DynamicArtWidgetState extends State<DynamicArtWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  final List<ColoredDot> _dots = [];
  late double _centerX;
  late double _centerY;
  late double _radius;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();

    // Initialize the dots
    for (int i = 0; i < 50; i++) {
      _dots.add(ColoredDot(Offset(0, 0), _generateRandomColor()));
    }

    _controller.addListener(() {
      setState(() {
        for (var dot in _dots) {
          dot.updatePosition(_centerX, _centerY, _radius);
        }
      });
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final Size size = MediaQuery.of(context).size;
    _centerX = size.width / 2;
    _centerY = size.height / 2;
    _radius = min(size.width, size.height) /
        4; // Use 1/4 of the screen size as the radius
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Color _generateRandomColor() {
    return Color.fromRGBO(
      Random().nextInt(256),
      Random().nextInt(256),
      Random().nextInt(256),
      1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ArtPainter(_dots),
      child: Container(),
    );
  }
}

class ArtPainter extends CustomPainter {
  final List<ColoredDot> dots;

  ArtPainter(this.dots);

  @override
  void paint(Canvas canvas, Size size) {
    for (var dot in dots) {
      final paint = Paint()
        ..color = dot.color
        ..style = PaintingStyle.fill;
      canvas.drawCircle(dot.position, 10.0, paint);
    }
  }

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

class ColoredDot {
  Offset position;
  Color color;
  final Random _random = Random();

  ColoredDot(this.position, this.color);

  void updatePosition(double centerX, double centerY, double radius) {
    // Calculate a random offset within the radius
    double dx = _random.nextDouble() * radius * 2 - radius;
    double dy = _random.nextDouble() * radius * 2 - radius;
    // Normalize the offset if it's outside the radius
    double distance = sqrt(dx * dx + dy * dy);
    if (distance > radius) {
      dx *= radius / distance;
      dy *= radius / distance;
    }
    // Update the position
    position = Offset(centerX + dx, centerY + dy);
  }
}

以下是对这段代码的分析：
一、整体功能概述
这段 Flutter 代码实现了一个动态艺术效果的应用，在屏幕上显示不断移动的彩色圆点，这些圆点围绕着屏幕中心在一定半径范围内随机移动。

二、代码结构解析
导入部分
import ‘package:flutter/material.dart’;：导入 Flutter 的核心库，用于构建用户界面。
import ‘dart:math’;：导入 Dart 的数学库，用于生成随机数和进行数学计算。

main函数
void main() { runApp(MyApp()); }：应用的入口点，启动 Flutter 应用并显示MyApp组件。

MyApp类
继承自StatelessWidget，表示无状态组件。
build方法返回一个MaterialApp，设置了应用的标题栏和主页内容为DynamicArtWidget。

DynamicArtWidget类
继承自StatefulWidget，表示有状态组件。
createState方法返回一个_DynamicArtWidgetState实例，用于管理该组件的状态。

_DynamicArtWidgetState类
定义了一个AnimationController用于控制动画，一个List存储彩色圆点，以及屏幕中心的坐标和半径。
initState方法中初始化动画控制器，设置动画持续时间并重复播放。同时初始化 50 个彩色圆点，每个圆点都有一个初始位置和随机颜色。并且添加了动画监听器，在动画每一帧更新时，调用setState触发界面重新绘制。
didChangeDependencies方法在组件依赖发生变化时被调用，这里获取屏幕尺寸，计算屏幕中心坐标和半径。
dispose方法中释放动画控制器资源。
_generateRandomColor方法生成随机颜色。
build方法返回一个CustomPaint，使用ArtPainter绘制彩色圆点。

ArtPainter类
继承自CustomPainter，用于自定义绘制。
接收一个彩色圆点列表作为参数，在paint方法中遍历列表，为每个圆点创建画笔并在画布上绘制圆形。
shouldRepaint方法返回true，表示在任何情况下都需要重新绘制。

ColoredDot类
表示一个彩色圆点，包含位置和颜色属性，以及一个随机数生成器。
updatePosition方法根据屏幕中心坐标和半径，计算并更新圆点的位置，确保圆点在半径范围内随机移动。

三、总结
这段代码通过动画控制器、自定义画家和有状态组件的配合，实现了一个动态的艺术效果，展示了 Flutter 在动画和自定义绘制方面的强大功能。用户可以看到屏幕上不断变化位置的彩色圆点，为应用增添了生动和趣味性。