Flutter中化身周围的圆形进度条

Question

我正试图找出如何在Flutter中围绕配置文件图像创建一个虚线进度条，但不确定如何继续。

我最初的计划是使用边界，但我似乎无法选择边界的长度。它总是围绕着整个小部件，这不是我想要的。

我正在寻找的一个例子是https://dribbble.com/shots/13974030-Longwalks-iOS-App-featured-by-Oprah-Winfrey

理想情况下，我希望酒吧被分成5或10"；块"；每一个都表示用于一览可视化的某个百分比。

我应该使用哪些小部件？

Answer 1

您可以尝试使用sleek_cyclar_slider。

您可以将其用作滑块或进度条。下面是一个如何使用它的例子。

要将其用作进度条，只需删除onChange或onChangeEnd，这将删除用户与其交互的能力。

final slider = SleekCircularSlider(
min: 0,
max: 1000,
initialValue: 426,
onChange: (double value) {
// callback providing a value while its being changed (with a pan gesture)
},
onChangeStart: (double startValue) {
// callback providing a starting value (when a pan gesture starts)
},
onChangeEnd: (double endValue) {
// ucallback providing an ending value (when a pan gesture ends)
},
innerWidget: (double value) {
// use your custom widget inside the slider (gets a slider value from the callback)
},
);

我不确定是否要把它分成"块"，但这应该是可能的。

Answer 2

dashed_cyclar_progress_bar:^0.0.4插入使用的

SizedBox(
height: 20,
width: 20,
child: DashedCircularProgressBar.aspectRatio(
aspectRatio: 2, // width ÷ height
progress: 25,
startAngle: 360,
sweepAngle: 360,
circleCenterAlignment: Alignment.bottomCenter,
foregroundColor: Colors.blue,
backgroundColor: const Color(0xffeeeeee),
foregroundStrokeWidth: 3,
backgroundStrokeWidth: 2,
backgroundGapSize: 2,
backgroundDashSize: 1,
//seekColor: Colors.yellow,
//seekSize: 22,
animation: true,
child:  SizedBox(
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(0,8,12,3),
child: Icon(
Icons.play_arrow,
color: Colors.blue,
size: 20
),
),
),
),
),
)