Create a round progress

Want to give your linear progress bars a smoother look in Flutter? It's really simple to add rounded corners.

How to Make it Round

The trick is to wrap your LinearProgressIndicator widget inside another widget called ClipRRect.

Using ClipRRect

ClipRRect helps you clip the corners of its child widget based on a radius you set. You use the borderRadius property to tell it how round you want the corners to be.

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(10)),
  child: LinearProgressIndicator(
    minHeight: 14,
    value: progress,
    color: Colors.red,
    backgroundColor: Colors.white,
  ),
)

Inside the Code

• borderRadius: BorderRadius.all(Radius.circular(10)): This is where the magic happens. Radius.circular(10) tells Flutter to make all four corners round with a radius of 10 units.
• child: LinearProgressIndicator(...): This is the progress bar itself.
  • minHeight: 14: Sets the height (or thickness) of the progress bar.
  • value: progress: This should be a number between 0.0 and 1.0 that shows how complete the task is.
  • color: Colors.red: Sets the color of the progress bar itself.
  • backgroundColor: Colors.white: Sets the color of the track behind the progress bar.

Wrapping Up

By just adding ClipRRect around your LinearProgressIndicator, you can easily give it nice rounded edges, making your app's UI look more polished.