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

Question

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

When I replace the LinearProgressIndicator with another widget (eg 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,
  ),
) 

Answer 1

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

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

Answer 2

Edit: I just wanted to point out my answer doesn't account for rounding the end of the 'value' fill inside the bar, which the OP wanted. However it seems many people came to this question looking for the answer I provided, (as did I before I found the answer and came back to respond).

So if you need the inside of this indicator also to have a rounded edge, as of now I think the accepted answer from Amit is the best route. If the inside of the indicator can have a flat edge and you don't want to use a third party package, I think my answer below is still the best option.

Original:

You actually don't need to use a third party package, and can wrap your LinearProgressIndicator with the ClipRRect widget and give it a circular border radius. If you want to give it a specific thickness/height then you could use a container as an intermediary:

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

would produce this, if placed in another widget with a defined width:

Answer 3

Let's try my custom progress bar, simple and don't use any library :)

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

I am going to leave my answer in case someone is looking for something custom, basic with custom 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,
          ),
        ),
      ),

Feel free to try it out :)

Answer 5

You can try this code:

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

To make the inner bar rounded, we need to use the following logic :

Answer 7

You can make use of curved_progress_bar , It has both CurvedCircularProgressIndicator as well as CurvedLinearProgressIndicator, and it works just like normal CircularProgressIndicator and LinearProgressIndicator.

Answer 8

Do not need to wrap LinearPercentIndicator inside a Container widget. You could get the desired output only using LinearPercentIndicator.

See the template code

    LinearPercentIndicator(
        lineHeight: 40.0,
        barRadius: const Radius.circular(20.0),
        percent: 0.7,
        animation: true,
        animationDuration: 1000,
        backgroundColor: Color(0xFFD6D6D6),
        progressColor: Color(0xFF5BFB82),          
    ),

Answer 9

You could try my library ( capped_progress_indicator ) that does what you want and works exactly like Flutter's original LinearProgressIndicator and CircularProgressIndicator . It not only rounds the ends of the track/background but also the ends of the progress/indicator.

So its just a matter of installing the package and changing your code from

LinearProgressIndicator(
  // ...
)

to

import 'package:capped_progress_indicator/capped_progress_indicator.dart';

LinearCappedProgressIndicator(
  // ...
)

You can also change the corner radius to your liking

LinearCappedProgressIndicator(), // Circle end (default).
LinearCappedProgressIndicator(cornerRadius: 5), // Rounded end.
LinearCappedProgressIndicator(cornerRadius: 0), // Square end.