Last active
July 6, 2022 14:07
-
-
Save iampato/29a144ca5a33a235f51fa4429dcf0149 to your computer and use it in GitHub Desktop.
Creating a dotted border container
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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