flutterprogress-barcornerradius

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


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

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

a busy cat


Solution

  • 1) Using Widget

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

    enter image description here

    2) Using dependency

    List of different types indicator https://pub.dev/packages/percent_indicator

    Try this template code

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

    enter image description here