Created with <3 with dartpad.dev.
Created
April 4, 2023 14:09
-
-
Save minikin/cdb16ad08d64b347d541fe5547d51f3d to your computer and use it in GitHub Desktop.
rustic-flora-0914
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'dart:math'; | |
const Color darkBlue = Color.fromARGB(255, 18, 32, 47); | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
theme: ThemeData.dark().copyWith( | |
scaffoldBackgroundColor: darkBlue, | |
), | |
debugShowCheckedModeBanner: false, | |
home: const Scaffold( | |
body: SizedBox( | |
width: 200, | |
height: 200, | |
child: CustomCircleProgressIndicator( | |
progress: 0.2, | |
strokeWidth: 2, | |
color: Colors.red, | |
backgroundColor: Colors.white, | |
), | |
), | |
), | |
); | |
} | |
} | |
class CustomCircleProgressIndicator extends StatelessWidget { | |
final double progress; | |
final double strokeWidth; | |
final Color color; | |
final Color backgroundColor; | |
const CustomCircleProgressIndicator({ | |
required this.progress, | |
required this.strokeWidth, | |
required this.color, | |
required this.backgroundColor, | |
}); | |
@override | |
Widget build(BuildContext context) { | |
return CustomPaint( | |
painter: _CircleProgressPainter( | |
progress: progress, | |
strokeWidth: strokeWidth, | |
color: color, | |
backgroundColor: backgroundColor, | |
), | |
child: Container(), | |
); | |
} | |
} | |
class _CircleProgressPainter extends CustomPainter { | |
final double progress; | |
final double strokeWidth; | |
final Color color; | |
final Color backgroundColor; | |
_CircleProgressPainter({ | |
required this.progress, | |
required this.strokeWidth, | |
required this.color, | |
required this.backgroundColor, | |
}); | |
@override | |
void paint(Canvas canvas, Size size) { | |
final radius = (size.width - strokeWidth - 20) / 2; | |
final center = Offset(size.width / 2, size.height / 2); | |
// Draw background circle | |
final backgroundPaint = Paint() | |
..color = backgroundColor | |
..style = PaintingStyle.stroke | |
..strokeWidth = strokeWidth; | |
canvas.drawCircle(center, radius, backgroundPaint); | |
// Draw progress arc | |
final progressPaint = Paint() | |
..color = color | |
..style = PaintingStyle.fill; | |
const startAngle = -pi / 2; | |
final sweepAngle = 2 * pi * progress; | |
canvas.drawArc( | |
Rect.fromCircle(center: center, radius: radius - 10), | |
startAngle, | |
sweepAngle, | |
true, | |
progressPaint, | |
); | |
} | |
@override | |
bool shouldRepaint(_CircleProgressPainter oldDelegate) { | |
return progress != oldDelegate.progress || | |
strokeWidth != oldDelegate.strokeWidth || | |
color != oldDelegate.color || | |
backgroundColor != oldDelegate.backgroundColor; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment