How To Change Flutter CircularProgressIndicator Stroke Width – Easy Flutter Example Code

flutter circularprogressindicator stroke width

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

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(
        ),
      )
flutter circularprogressindicator default stroke width
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:

CircularProgressIndicator(
          strokeWidth: 10
        )
flutter circularprogressindicator stroke width
You can see that the stroke width is now changed and it looks more thick as compared to the default one. We can make it thin by passing less value to the stroke width constructor. See below code:
CircularProgressIndicator(
          strokeWidth: 2.0,
        )
flutter circularprogressindicator custom stroke width
So by following the above method, we can easily customize Flutter CircularProgressIndicator stroke width.
Below is the complete source code of Flutter CircularProgressIndicator widget with customized stroke width.

Custom Flutter CircularProgressIndicator Stroke Width Source Code

flutter circularprogressindicator stroke width

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: SizedBox(
        height: 100,
        width: 100,
        child: CircularProgressIndicator(
          strokeWidth: 10,
        ),
      )),
    ));
  }
}

Conclusion

To conclude this tutorial, hope you now have a detailed practical knowledge of how to customize the stroke width of Flutter CircularProgressIndicator widget. I’ll be very glad to receive your feedback regarding this post.

I’d also welcome you to visit my other articles on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.