How to create a dotted border around a box in flutter?

Question

I am building a list of boxes layouts in my app using flutter. I want dotted border around the box. I have used card widget to create the boxes. But, how can I get dotted border around the boxes?

Answer 1

EDIT

I have added this as a package in pub.

Now, all you need to do is

DottedBorder(   color: Colors.black,   gap: 3,   strokeWidth: 1,   child: FlutterLogo(size: 148), ) 

Working Solution [Outdated]

Like tomerpacific said in this answer, Flutter does not have a default implementation for dashed border at the moment.

I worked for some time yesterday and was able to come up with a solution using CustomPainter. Hope this helps someone.

Add the DashedRect to your container, like so

class _MyHomePageState extends State<MyHomePage> {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(widget.title),       ),       body: Center(         child: Container(           height: 400,           width: 300,           color: Colors.black12,           child: DashedRect(color: Colors.red, strokeWidth: 2.0, gap: 3.0,),         ),       ),     );   } } 

DashedRect.dart

import 'package:flutter/material.dart'; import 'dart:math' as math;  class DashedRect extends StatelessWidget {   final Color color;   final double strokeWidth;   final double gap;    DashedRect(       {this.color = Colors.black, this.strokeWidth = 1.0, this.gap = 5.0});    @override   Widget build(BuildContext context) {     return Container(       child: Padding(         padding: EdgeInsets.all(strokeWidth / 2),         child: CustomPaint(           painter:               DashRectPainter(color: color, strokeWidth: strokeWidth, gap: gap),         ),       ),     );   } }  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: 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: 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, currentPoint.y)           : path.moveTo(currentPoint.x, currentPoint.y);       shouldDraw = !shouldDraw;       currentPoint = math.Point(         currentPoint.x + dx,         currentPoint.y + dy,       );     }     return path;   }    @override   bool shouldRepaint(CustomPainter oldDelegate) {     return true;   } } 

I do not expect this to fit in with all use cases and there is a lot of room for customization and improvement. Comment if you find any bugs.