如何在Flutter中向LinearProgressIndicator添加边框/角半径? [英] How to add a border/corner radius to a LinearProgressIndicator in Flutter?

问题描述

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

I am trying to add a border radius to a LinearProgressIndicator in Flutter.

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

When I replace the LinearProgressIndicator with another widget (e.g. Text) in the code below, it works, as expected.

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

推荐答案

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

这篇关于如何在Flutter中向LinearProgressIndicator添加边框/角半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！