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

Question

我正在尝试向LinearProgressIndicatorFlutter 中的a 添加边界半径。

当我在下面的代码LinearProgressIndicator中用另一个小部件（例如Text）替换 时，它按预期工作。

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

Answer 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,
          ),
        )

Answer 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),
      ),
    ),
  )

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

Answer 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),
          ),
        ),
      ],
    );
  },
);
}
}

Answer 4

你可以试试这个代码：

Container(
   decoration: const BoxDecoration(
   borderRadius: BorderRadius.all(Radius.circular(40.0))),
   child: const ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  child: LinearProgressIndicator(
                    minHeight: 5.0,
                    value: 0.2,
                    color: Colors.white,
                    backgroundColor: Color(0xFF3B2D73),
                  ),
                ),