Skip to content

Instantly share code, notes, and snippets.

@imaNNeo
Created September 22, 2020 17:59
Show Gist options
  • Save imaNNeo/300d7cde6520887fd7f918134f8a111b to your computer and use it in GitHub Desktop.
Save imaNNeo/300d7cde6520887fd7f918134f8a111b to your computer and use it in GitHub Desktop.
Arc progress bar challenge
import 'dart:ui' as ui;
import 'dart:math' as math;
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(HomePage());
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
double percent = 0.5;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(24.0),
child: CustomPaint(
painter: MyPainter(
percent: percent,
fromAngle: 10.toRadian(),
toAngle: 80.toRadian()
),
size: Size(200, 200),
),
),
SizedBox(
height: 40,
),
Text('Percent: ${percent.toStringAsFixed(2)}'),
Slider(
value: percent,
onChanged: (newValue) {
setState(() {
percent = newValue;
});
})
],
);
}
}
class MyPainter extends CustomPainter {
final double percent;
final double fromAngle;
final double toAngle;
MyPainter({
this.percent,
this.fromAngle,
this.toAngle,
});
@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromLTWH(0, 0, size.width, size.height);
final gradient = ui.Gradient.sweep(
Offset(size.width / 2, size.height / 2),
[Colors.blue, Colors.red],
[percent, percent],
TileMode.mirror,
fromAngle - 10.toRadian(),
toAngle + 10.toRadian(),
null,
);
final paint = Paint()
..shader = gradient
..strokeWidth = 20
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
canvas.drawArc(rect, fromAngle, toAngle - fromAngle, false, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
extension on int {
double toRadian() => (this * math.pi) / 180.0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment