时间戳

首页 > 解决方案 > Flutter中头像周围的圆形进度条

flutter - Flutter中头像周围的圆形进度条

问题描述

我试图弄清楚如何在 Flutter 中围绕个人资料图像创建破折号进度条，但不确定如何继续。

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

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

理想情况下，我希望将条分成 5 或 10 个“块”，每个“块”代表一些百分比，以便一目了然的可视化。

我应该为此使用哪些小部件？

标签： flutterprogress-bar

解决方案

您可以尝试使用slim_circular_slider。

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

要将其用作进度条，只需删除onChangeor 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)
  },
);

我不确定是否将其划分为“块”，但应该是可能的。

推荐阅读