如何在 Flutter 中将 border/corner 半径添加到 LinearProgressIndicator？

Question

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

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

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 想要的栏内 'value' 填充的末尾。然而，似乎很多人来到这个问题寻找我提供的答案，（就像我之前找到答案并回来回复一样）。

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

原文：

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

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

我将留下我的答案，以防有人正在寻找自定义的、带有自定义 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,
          ),
        ),
      ),

随时尝试一下:)

Answer 4

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

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 5

您可以试试这个代码：

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

Answer 6

要使内部条形变圆，我们需要使用以下逻辑：

使Outer进度条变圆，使用ClipRRect并设置borderRadius

要使内部条形变圆，我们可以使用 Container，我们将使用 borderRadius 使一侧（右侧）变圆。然后，我们将使用 Stack 将它放在进度条的顶部。容器的宽度实际上就是进度条显示的进度。

      Container(
          width: (MediaQuery.of(context).size.width - 30) *
              calculateProgressBarValue(Data1, Data2),
          height: 6,
          decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(CommonDimens.MARGIN_10),
                bottomLeft: Radius.circular(CommonDimens.MARGIN_10),
              ),
              color: progressBarColor,

        ),

完整代码：

ClipRRect(
      borderRadius: const BorderRadius.all(Radius.circular(10)),
      child: Stack(
        children: [
          ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            child: LinearProgressIndicator(
              minHeight: 6.0,
              valueColor:
                  AlwaysStoppedAnimation<Color>(Colors.grey),
              value: 1,
            ),
          ),
          Positioned(
            right: 0,
            child: Container(
              width: ((MediaQuery.of(context).size.width) - 30) *
                  calculateProgressBarValue(Data1,Data2),
              height: 6,
              decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(CommonDimens.MARGIN_10),
                    bottomLeft: Radius.circular(CommonDimens.MARGIN_10),
                  ),
                  color: progressBarColor,
            ),
          ),
        ],
      ),
    );

如何在 Flutter 中将 border/corner 半径添加到 LinearProgressIndicator？

How to add a border/corner radius to a LinearProgressIndicator in Flutter?

flutter

progress-bar

cornerradius