Flutter Custom Circular Progress Indicator
This snippet showcases how to create a custom circular progress indicator in a Flutter application. It includes the setup of a basic Flutter app structure and an animated circular progress widget.unknown
dart
a year ago
3.3 kB
17
Indexable
// ignore_for_file: prefer_const_constructors
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(InitialScreen());
}
class InitialScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: CustomCircularProgressWidget(),
),
),
);
}
}
class CustomCircularProgressWidget extends StatefulWidget {
@override
_CustomCircularProgressWidgetState createState() =>
_CustomCircularProgressWidgetState();
}
class _CustomCircularProgressWidgetState
extends State<CustomCircularProgressWidget>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 5));
_animation =
Tween<double>(begin: 0.0, end: 1.0).animate(_animationController)
..addListener(() {
setState(() {});
});
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: CircularProgressPainter(
progress: _animation.value,
filledColor: Colors.purple,
unfilledColor: Colors.purpleAccent,
),
child: SizedBox(
width: 350,
height: 350,
),
);
}
}
class CircularProgressPainter extends CustomPainter {
final double progress;
final Color filledColor;
final Color unfilledColor;
CircularProgressPainter({
required this.progress,
required this.filledColor,
required this.unfilledColor,
});
@override
void paint(Canvas canvas, Size size) {
double radius = min(size.width / 2, size.height / 2);
Offset center = Offset(size.width / 2, size.height / 2);
final filledPaint = Paint()
..color = filledColor
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
final unfilledPaint = Paint()
..color = unfilledColor
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
double startAngle = -pi / 2;
double sweepAngle = 2 * pi * progress;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
startAngle,
sweepAngle,
false,
filledPaint,
);
double dashWidth = 5;
double dashSpace = 5;
double circumference = 2 * pi * radius;
double dashCount =
(circumference / (dashWidth + dashSpace)).floor().toDouble();
double dashAngle = 2 * pi / dashCount;
for (double i = 0; i < dashCount; i++) {
double currentAngle = startAngle + (i * dashAngle);
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
currentAngle,
dashWidth / radius,
false,
unfilledPaint,
);
}
}
@override
bool shouldRepaint(CircularProgressPainter oldDelegate) {
return oldDelegate.progress != progress;
}
}
Editor is loading...
Leave a Comment