Skip to content

Instantly share code, notes, and snippets.

@iampato
Last active July 6, 2022 14:07
Show Gist options
  • Select an option

  • Save iampato/29a144ca5a33a235f51fa4429dcf0149 to your computer and use it in GitHub Desktop.

Select an option

Save iampato/29a144ca5a33a235f51fa4429dcf0149 to your computer and use it in GitHub Desktop.
Creating a dotted border container
import 'dart:math' as math;
import 'package:flutter/material.dart';
class DashRectPainter extends CustomPainter {
double strokeWidth;
Color color;
double gap;
DashRectPainter(
{this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});
@override
void paint(Canvas canvas, Size size) {
Paint dashedPaint = Paint()
..color = color
..strokeWidth = strokeWidth
..style = PaintingStyle.stroke;
double x = size.width;
double y = size.height;
Path topPath = getDashedPath(
a: const math.Point(0, 0),
b: math.Point(x, 0),
gap: gap,
);
Path rightPath = getDashedPath(
a: math.Point(x, 0),
b: math.Point(x, y),
gap: gap,
);
Path bottomPath = getDashedPath(
a: math.Point(0, y),
b: math.Point(x, y),
gap: gap,
);
Path leftPath = getDashedPath(
a: const math.Point(0, 0),
b: math.Point(0.001, y),
gap: gap,
);
canvas.drawPath(topPath, dashedPaint);
canvas.drawPath(rightPath, dashedPaint);
canvas.drawPath(bottomPath, dashedPaint);
canvas.drawPath(leftPath, dashedPaint);
}
Path getDashedPath({
required math.Point<double> a,
required math.Point<double> b,
required gap,
}) {
Size size = Size(b.x - a.x, b.y - a.y);
Path path = Path();
path.moveTo(a.x, a.y);
bool shouldDraw = true;
math.Point currentPoint = math.Point(a.x, a.y);
num radians = math.atan(size.height / size.width);
num dx = math.cos(radians) * gap < 0
? math.cos(radians) * gap * -1
: math.cos(radians) * gap;
num dy = math.sin(radians) * gap < 0
? math.sin(radians) * gap * -1
: math.sin(radians) * gap;
while (currentPoint.x <= b.x && currentPoint.y <= b.y) {
shouldDraw
? path.lineTo(currentPoint.x.toDouble(), currentPoint.y.toDouble())
: path.moveTo(currentPoint.x.toDouble(), currentPoint.y.toDouble());
shouldDraw = !shouldDraw;
currentPoint = math.Point(
currentPoint.x + dx,
currentPoint.y + dy,
);
}
return path;
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomPaint(
foregroundPainter: DashRectPainter(),
child: Container(
child: const Center(
child: Text('Hello World'),
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment