Flutter：如何在 flutter 中实现这样的径向小部件？ 圆形面包屑/步骤进度指示器

Question

我需要在 Flutter 中创建一个与上面完全相同的 UI。 此处使用 1-2-3 数字表示步骤。 那可能是动态的。 可能是或多或少的步骤。 步骤 1 完成后，1 和 2 之间的圆线应涂成蓝色，依此类推。 我需要一个指南来完成以上 UI 和相关功能。 提前致谢

Answer 1

使用stack和Postioned小部件：

计算你的面积：

右上角为Offset zero (x=0, y = 0)，可以将计算出来的数据传给Positioned Widget

这里的简单代码供您参考：

Widget build(BuildContext context) {

double areaRadius = MediaQuery.of(context).size.width;
double bigCircleRadius = areaRadius * 0.8;
double smallCircleRadius = areaRadius * 0.15;
double imageRadius = areaRadius * 0.6;

return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: true,
  ),
  body: SizedBox(
    height: areaRadius,
    width: areaRadius,
    child: Stack(
      children: [
        ///Bottom Layer --> BIG Circle
        Positioned(
          top: areaRadius * 0.1,
          left: areaRadius * 0.1,
          child: Container(
            width: bigCircleRadius,
            height: bigCircleRadius,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: Colors.black.withOpacity(0.1),
                width: 4.0
              )
            ),
          ),
        ),
        Positioned(
          top: areaRadius * 0.2,
          left: areaRadius * 0.2,
          child: Container(
            width: imageRadius,
            height: imageRadius,
            decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/burger.png"),
                  fit: BoxFit.contain
                ),
                shape: BoxShape.circle
            ),
          ),
        ),
        ///you can use trigonometry for this <---- Create a Offset(x,y) left is X and top is Y
        Positioned(
          left: (areaRadius * 0.5) - (smallCircleRadius /2),
          top: (areaRadius * 0.1) - (smallCircleRadius /2),
          child: Container(
            width: smallCircleRadius,
            height: smallCircleRadius,
            decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle
            ),
            child: const Center(
              child: Text("1", style: TextStyle(color: Colors.white, fontSize: 20.0),),
            ),
          ),
        ),

        Positioned(
          left: (areaRadius * 0.25) - (smallCircleRadius/2),
          top: (areaRadius * 0.8) - (smallCircleRadius /2),
          child: Container(
            width: smallCircleRadius,
            height: smallCircleRadius,
            decoration: const BoxDecoration(
                color: Colors.grey,
                shape: BoxShape.circle
            ),
            child: const Center(
              child: Text("2", style: TextStyle(color: Colors.black, fontSize: 20.0),),
            ),
          ),
        ),

        Positioned(
          left: (areaRadius * 0.75) - (smallCircleRadius/2),
          top: (areaRadius * 0.8) - (smallCircleRadius /2),
          child: Container(
            width: smallCircleRadius,
            height: smallCircleRadius,
            decoration: const BoxDecoration(
                color: Colors.grey,
                shape: BoxShape.circle
            ),
            child: const Center(
              child: Text("3", style: TextStyle(color: Colors.black, fontSize: 20.0),),
            ),
          ),
        ),
      ]
    ),
  ),
);

}

结果如下：

Answer 2

@Sayyid J 您的答案非常适合 static 3 数字指示器。 但我的情况是这个数字是动态的。 它可能是 2,3,4,5,6.. 步骤。

所以我创建了这个 function 来根据索引构建小部件

  _buildChildren(context,aR,sCR,c){
final children = <Widget>[];
var theta = 360/c;
for (var i = 1; i <= c; i++) {
  children.add( _customChild(
      sCR,
      (aR /2)*(sin (2 * math.pi * theta*(i-1) / 360)+1),
      (aR/2)*(cos (2 * math.pi * theta*(i-1) / 360)-1)*-1,
      i
  ));
}
return children;

}

  _customChild(smallCircleRadius,x,y,i){
print("${x.toString()} ${y.toString()}");
return  Positioned(
  left: x,
  top: y,
  child: Container(
    width: smallCircleRadius,
    height: smallCircleRadius,
    decoration: const BoxDecoration(
        color: Colors.cyan,
        shape: BoxShape.circle
    ),
    child:  Center(
      child: Text(i.toString(), style: TextStyle(color: Colors.white, fontSize: 20.0),),
    ),
  ),
);

}

但结果有点不对齐，如下所示