Skip to content

Instantly share code, notes, and snippets.

@jogboms
Last active April 11, 2021 11:20
Show Gist options
  • Select an option

  • Save jogboms/86b806044acece03b910a7eea3a3fe36 to your computer and use it in GitHub Desktop.

Select an option

Save jogboms/86b806044acece03b910a7eea3a3fe36 to your computer and use it in GitHub Desktop.
Multiple ways to draw a ring of ticks
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Playground(),
),
);
class Playground extends StatefulWidget {
@override
_PlaygroundState createState() => _PlaygroundState();
}
class _PlaygroundState extends State<Playground> with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF1D232F),
body: Center(
child: CustomPaint(
size: Size.fromRadius(400),
painter: TickPainter(),
),
),
);
}
}
class TickPainter extends CustomPainter {
static double deg2Rad(double degree) {
return degree * pi / 180;
}
@override
void paint(Canvas canvas, Size size) {
final radius = size.shortestSide / 4;
final center = size.center(Offset.zero);
const tickCount = 60;
const tickDelta = 360 / tickCount;
const tickStrokeWidth = 4.0;
const tickStrokeLength = 20.0;
// 1
for (var i = 0; i < tickCount; i++) {
final angle = deg2Rad(i * tickDelta);
final start = center + Offset.fromDirection(angle, radius);
canvas.drawLine(
start,
start - Offset.fromDirection(angle, tickStrokeLength),
Paint()
..color = Colors.red
..strokeWidth = tickStrokeWidth,
);
}
// 2
// final path = Path();
// for (var i = 0; i < tickCount; i++) {
// final angle = deg2Rad(i * tickDelta);
// final start = center + Offset.fromDirection(angle, radius);
//
// // A
// final end = start - Offset.fromDirection(angle, tickStrokeLength);
// path
// ..moveTo(start.dx, start.dy)
// ..lineTo(end.dx, end.dy);
//
// // B
// // final end = Offset.fromDirection(angle, tickStrokeLength);
// // path
// // ..moveTo(start.dx, start.dy)
// // ..relativeLineTo(-end.dx, -end.dy);
//
// }
//
// canvas.drawPath(
// path,
// Paint()
// ..style = PaintingStyle.stroke
// ..color = Colors.red
// ..strokeWidth = tickStrokeWidth,
// );
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment