To create a circular progress bar in Flutter, you can use the CircularProgressIndicator widget. Below is a simple example of how to implement it:
Basic Circular Progress Bar
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Circular Progress Bar Example'),
),
body: Center(
child: CircularProgressIndicator(),
),
),
);
}
}
Customized Circular Progress Bar
You can customize the progress bar with different colors, thickness, and more:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Circular Progress Bar Example'),
),
body: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
backgroundColor: Colors.grey[300],
strokeWidth: 8.0,
),
),
),
);
}
}
Circular Progress Bar with Percentage
If you want to show a circular progress bar that displays progress (e.g., a percentage):
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double progressValue = 0.0;
void updateProgress() {
setState(() {
progressValue += 0.1;
if (progressValue > 1.0) {
progressValue = 0.0;
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Circular Progress Bar with Percentage'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(
value: progressValue,
valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
backgroundColor: Colors.grey[300],
strokeWidth: 8.0,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: updateProgress,
child: Text('Increase Progress'),
),
SizedBox(height: 20),
Text('${(progressValue * 100).round()}%'),
],
),
),
),
);
}
}
Explanation:
- CircularProgressIndicator(): A widget that displays a circular progress indicator.
- valueColor: Specifies the color of the progress indicator.
- backgroundColor: Specifies the color of the track behind the progress indicator.
- strokeWidth: Sets the thickness of the progress indicator's stroke.
- value: If null, the progress indicator shows an indeterminate spinner. If a value is provided, it represents the completion percentage of the task, where 1.0 means 100%.
Top comments (0)