Flutter(Dart)如何随机选取自定义类实例并传参渲染对应Widget

步骤1：导入随机数依赖、整理Circle实例集合 #

首先引入dart内置的随机数工具，再把你创建的6个Circle实例统一放到列表中方便随机选取：

import 'dart:math';

// 你原有Circle类、实例定义代码保留
final List<Circle> allCircles = [
  firstCircle,
  fourthCircle,
  // 剩余4个Circle实例依次添加到列表中
];

步骤2：封装可传参的Circle渲染Widget #

把你原有硬编码的样式替换为传入的Circle实例属性，同时处理angle旋转逻辑（注意Dart旋转默认用弧度，如果你传入的angle本身就是弧度可直接删除转弧度的计算逻辑）：

Widget renderCircle(Circle circle, String imageAssetPath) {
  return Transform.rotate(
    // 角度转弧度：如果你的angle字段是弧度值直接写 circle.angle 即可
    angle: circle.angle * pi / 180,
    child: Container(
      width: 141,
      height: 142,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(2500.0),
        color: circle.frontColor,
        image: DecorationImage(
          colorFilter: circle.rearColor,
          image: AssetImage(imageAssetPath),
        ),
      ),
    ),
  );
}

步骤3：在SizedBox中调用、随机选取实例 #

直接通过Random生成随机下标从列表中取实例传入即可：

Center(
  child: SizedBox(
    height: 142,
    width: 141,
    child: renderCircle(
      allCircles[Random().nextInt(allCircles.length)],
      '替换为你自己的图片资源路径'
    ),
  ),
)

可选优化 #

如果需要固定显示某个Circle、或者点击后才切换随机样式，建议使用StatefulWidget存储选中的Circle实例，切换时调用setState更新即可，避免每次页面刷新都随机更换。
也可以把Circle类改为不可变的常量类，提升性能：

class Circle {
  final Color frontColor;
  final ColorFilter rearColor;
  final double angle;

  const Circle(
    this.frontColor,
    this.rearColor,
    this.angle,
  );
}

// 实例也可修饰为const
const Circle firstCircle = Circle(
  Color(0xFF41AB9D),
  ColorFilter.mode(Color(0xFF49C1B0), BlendMode.srcATop),
  0.0,
);

内容的提问来源于stack exchange，提问作者AndrewS19