Skip to content

Instantly share code, notes, and snippets.

@gausoft
Last active October 23, 2021 23:42
Show Gist options
  • Save gausoft/4b8000431c2a7f1a3077f24c919d566c to your computer and use it in GitHub Desktop.
Save gausoft/4b8000431c2a7f1a3077f24c919d566c to your computer and use it in GitHub Desktop.
Custom marker with dart paint
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom marker',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
CustomPaint(
size: const Size(70, 70),
painter: ShapesPainter(),
),
const Icon(Icons.masks, color: Colors.white)
],
),
),
),
);
}
}
class ShapesPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
// set the color property of the paint
paint.color = Colors.deepOrange;
// center of the canvas is (x,y) => (width/2, height/2)
Offset center = Offset(size.width / 2, size.width / 2.4);
double radius = size.width / 2.5;
final paint2 = Paint();
paint2.color = Colors.deepOrange;
paint2.style = PaintingStyle.fill;
Path path = Path();
path.moveTo(size.width / 2, size.height);
path.lineTo(size.width / 8, size.width / 1.8);
path.lineTo(7 * size.width / 8, size.width / 1.8);
path.close();
// draw the circle on centre of canvas having radius 75.0
canvas.drawCircle(center, radius, paint);
canvas.drawPath(path, paint2);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment