如何在 Flutter 中为 LinearProgressIndicator 添加边框/角半径？答案

【问题标题】：How to add a border/corner radius to a LinearProgressIndicator in Flutter?如何在 Flutter 中为 LinearProgressIndicator 添加边框/角半径？
【发布时间】：2019-12-23 08:10:24
【问题描述】：

我正在尝试在 Flutter 中为 LinearProgressIndicator 添加边框半径。

当我在下面的代码中将LinearProgressIndicator 替换为另一个小部件（例如Text）时，它可以正常工作。

Container(
  decoration: new BoxDecoration(
      borderRadius:
          new BorderRadius.all(const Radius.circular(20.0))),
  child: LinearProgressIndicator(
    value: _time,
  ),
)

【问题讨论】：

似乎ClipRRect 可以解决问题。但内条仍然只有左侧圆形。 i.imgur.com/Jdrm8up.png

标签： flutter progress-bar cornerradius

【解决方案1】：

1) 使用小部件

 Container(
          margin: EdgeInsets.symmetric(vertical: 20),
          width: 300,
          height: 20,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            child: LinearProgressIndicator(
              value: 0.7,
              valueColor: AlwaysStoppedAnimation<Color>(Color(0xff00ff00)),
              backgroundColor: Color(0xffD6D6D6),
            ),
          ),
        )

2) 使用依赖

不同类型指标列表https://pub.dev/packages/percent_indicator

试试这个模板代码

        child:  Padding(
          padding: EdgeInsets.all(15.0),
          child:  LinearPercentIndicator(
            width: MediaQuery.of(context).size.width - 50,
            animation: true,
            lineHeight: 20.0,
            animationDuration: 2000,
            percent: 0.9,
            linearStrokeCap: LinearStrokeCap.roundAll,
            progressColor: Colors.greenAccent,
          ),
        )

【讨论】：

在您的示例代码中，您没有使用百分比指示器。它被称为LinearPercentIndicator，如果你使用它，你就不再需要ClipRRect。同样ClipRRect 只会围绕外栏，而不是内栏（请参阅我对我帖子的评论）
嗯，我明白了，你应该遵循依赖pub.dev/packages/percent_indicator
编辑您的原始帖子，使用LinearPercentIndicator，以便我将其标记为正确答案。
@AmitPrajapati 必须是main dependancy 还是可以是dev dependancy？
@Pretty_Girl 用于依赖。更多信息可以阅读stackoverflow.com/questions/57751291/…

【解决方案2】：

编辑：我只是想指出我的答案没有考虑到 OP 想要的栏内“值”填充的结尾。然而，似乎很多人来这个问题是为了寻找我提供的答案（就像我在找到答案并回来回复之前一样）。

因此，如果您需要该指标的内部也具有圆形边缘，那么到目前为止，我认为 Amit 接受的答案是最佳途径。如果指示器的内部可以有一个平坦的边缘并且您不想使用第三方包，我认为我下面的答案仍然是最好的选择。

原文：

您实际上不需要使用第三方包，并且可以使用 ClipRRect 小部件包装您的 LinearProgressIndicator 并为其指定圆形边框半径。如果你想给它一个特定的厚度/高度，那么你可以使用一个容器作为中介：

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Container(
    height: 10,
      child: LinearProgressIndicator(
        value: 0.35, // percent filled
        valueColor: AlwaysStoppedAnimation<Color>(Colors.orange),
        backgroundColor: Color(0xFFFFDAB8),
      ),
    ),
  )

如果将其放置在具有定义宽度的另一个小部件中，则会产生此效果：

【讨论】：

在我原来的帖子中，我希望内栏的右角也可以圆角。在你的例子中是直的。
哦，我现在明白了！抱歉，我在回复中错过了它。在那种情况下，您是否无法找到不使用 percent_indicator 包的方法？
好久没用过flutter了，所以没找到，很遗憾。
内栏没有圆角，但是在不添加更多依赖的情况下使用原生东西非常酷，请求 Flutter 团队更新内栏选项也很棒.
@EduardoPereira 谢谢！是的，我后来意识到这个问题仍然存在，并且一直意味着提出请求/挖掘源代码足以尝试提交 PR ......尽管我对这些东西还是新手?

【解决方案3】：

让我们试试我的自定义进度条，简单且不使用任何库:)

class ProgressBar extends StatelessWidget {
 final double max;
 final double current;
 final Color color;

 const ProgressBar(
  {Key? key,
  required this.max,
  required this.current,
  this.color = AppColors.secondaryColor})
  : super(key: key);
  @override
  Widget build(BuildContext context) {
  return LayoutBuilder(
  builder: (_, boxConstraints) {
    var x = boxConstraints.maxWidth;
    var percent = (current / max) * x;
    return Stack(
      children: [
        Container(
          width: x,
          height: 7,
          decoration: BoxDecoration(
            color: Color(0xffd3d3d3),
            borderRadius: BorderRadius.circular(35),
          ),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: percent,
          height: 7,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(35),
          ),
        ),
      ],
    );
  },
);
}
}

【讨论】：

【解决方案4】：

我将留下我的答案，以防有人正在寻找自定义的东西，基本的自定义 BorderRadius

      Container(
        height: 24.0,
        margin: EdgeInsets.only(top: 12.0, bottom: 2.0),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
        ),
        clipBehavior: Clip.antiAlias,
        child: FractionallySizedBox(
          alignment: Alignment.centerLeft,
          widthFactor: 0.57,
          heightFactor: 1.0,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.all(Radius.circular(4.0)),
            ),
            clipBehavior: Clip.antiAlias,
          ),
        ),
      ),

请随意尝试:)

【讨论】：