How To Change Flutter CircularProgressIndicator Stroke Width

In this tutorial, we’ll learn how to change Flutter CircularProgressIndicator stroke width by using practical Flutter code examples.

Outline

1. Introduction: Flutter CircularProgressIndicator Stroke Width
2. Default Flutter CircularProgressIndicator Stroke Width
3. Change Flutter CircularProgressIndicator Stroke Width
4. Custom Flutter CircularProgressIndicator Stroke Width Source Code
5. Conclusion

Introduction: Flutter CircularProgressIndicator Stroke Width

The stroke width specifies the circular line thickness of **Flutter circular progress indicator** widget. Let’s first see its default thickness/width and after that, we’ll customize it using practical example code.

Default Flutter CircularProgressIndicator Stroke Width

For that, we’ve to define/implement a simple Flutter circular progress indicator widget. See below code:

SizedBox(
        height: 100,
        width: 100,
        child: CircularProgressIndicator(
        ),
      )

Above image shows the default stroke width of Flutter CircularProgressIndicator. We also have wrapped this progress indicator widget with **Flutter sizedBox** to give this circular widget some specific size. Let’s now customize its stroke width.

Change Flutter CircularProgressIndicator Stroke Width

We’ve to make use of the stroke width constructor of circular progress indicator widget. This constructor takes a double(decimal value) but integer will also work. By default, its value is 4.0. For demonstration, let’s change it to 10. See below code: **Continue reading…**