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( ), )
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 )
CircularProgressIndicator( strokeWidth: 2.0, )
Custom Flutter CircularProgressIndicator Stroke Width Source Code
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.
