Skip to content

Instantly share code, notes, and snippets.

@Skogsfrae
Created September 17, 2021 07:23
Show Gist options
  • Save Skogsfrae/059f3ce21338c774853ed826c27af7ad to your computer and use it in GitHub Desktop.
Save Skogsfrae/059f3ce21338c774853ed826c27af7ad to your computer and use it in GitHub Desktop.
Flutter Custom Paint (masking arc with open path)
import 'package:flutter/material.dart';
import 'dart:math' as 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: Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.black.withOpacity(.8),
child: Center(
child: SizedBox(
height: 300,
width: 300,
child: CustomPaint(
painter: MyWidget()
),
),
),
),
),
);
}
}
class MyWidget extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, (size.height / 2) + 20);
final radius = math.min(size.width, size.height) / 2 - 5;
final ovalRect = Rect.fromCenter(center: center, width: radius * 2, height: radius * 2);
final arch1 = Path()..addArc(ovalRect, math.pi, math.pi);
final paint1 = Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 20
..color = Colors.amber;
final arch2 = Path()..addArc(ovalRect, math.pi, (math.pi / 2) + .05);
final paint2 = Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 23
..color = Colors.transparent
..blendMode = BlendMode.srcOut;
final arch3 = Path()..addArc(ovalRect, math.pi, (math.pi / 2));
final paint3 = Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 21
..color = Colors.purple;
canvas.saveLayer(Rect.largest, Paint());
canvas.drawPath(arch1, paint1);
canvas.drawPath(arch2, paint2);
canvas.restore();
canvas.drawPath(arch3, paint3);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment