How to Make Dotted/Dash Border on Container in Flutter App

Got a design that calls for a dotted or dashed border around a widget? It seems like it should be simple, but as you’ve probably found, Flutter’s standard Container decoration doesn’t have a borderStyle property for this.

Don’t worry, it’s a common hurdle. Luckily, there are a couple of great ways to get it done.

The Easy Way: Using the dotted_border Package

When you need a quick, reliable, and customizable solution, the Flutter community has your back. The dotted_border package is a fantastic, lightweight utility built for this exact purpose.

Step 1: Add the Dependency

First, add the package to your pubspec.yaml file:

YAML

dependencies:
  flutter:
    sdk: flutter
  dotted_border: ^2.1.0 # Use the latest version

dependencies:
  flutter:
    sdk: flutter
  dotted_border: ^2.1.0 # Use the latest version

Don’t forget to run flutter pub get in your terminal to install it.

Step 2: Wrap Your Widget

Now, import the package and wrap any widget you want with the DottedBorder widget. It’s that simple.

The DottedBorder widget acts as a decorator. You place it around your Container, Card, Icon, or any other widget.

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';

// ...

DottedBorder(
  color: Colors.blue, //color of dotted/dash line
  strokeWidth: 2, //thickness of dash/dots
  dashPattern: const [8, 4], //dash patterns, 8 is dash width, 4 is space width
  borderType: BorderType.RRect, //RRect for rounded corner
  radius: const Radius.circular(12), //radius for rounded corner
  child: Container(
    height: 200,
    width: double.infinity,
    color: Colors.blue.withOpacity(0.1),
    child: const Center(child: Text('Add Your Widget Here')),
  ),
)

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';

// ...

DottedBorder(
  color: Colors.blue, //color of dotted/dash line
  strokeWidth: 2, //thickness of dash/dots
  dashPattern: const [8, 4], //dash patterns, 8 is dash width, 4 is space width
  borderType: BorderType.RRect, //RRect for rounded corner
  radius: const Radius.circular(12), //radius for rounded corner
  child: Container(
    height: 200,
    width: double.infinity,
    color: Colors.blue.withOpacity(0.1),
    child: const Center(child: Text('Add Your Widget Here')),
  ),
)

Customizing Your Border

The DottedBorder package is highly customizable:

• dashPattern: This is the key property. It takes a list of doubles. For [8, 4], it creates a dash 8 pixels long followed by a space 4 pixels long. For a dotted line, you could use something like [2, 2].
• borderType: You can choose BorderType.Rect for a square border, BorderType.RRect for rounded corners (don’t forget to set the radius!), BorderType.Circle, or BorderType.Oval.
• strokeWidth: Controls the thickness of the dashes or dots.
• padding: Adds space between the border and the child widget.

This package is almost always the right choice for speed and simplicity.

The Native Way: Using CustomPaint

What if you want total control, need to animate the border, or want to avoid adding another package to your project? Flutter’s built-in CustomPaint widget is the answer. It’s more code, but it’s incredibly powerful.

This method involves creating your own “painter” class that tells Flutter exactly how to draw the dashed line.

Step 1: Create a DashedLinePainter

First, create a class that extends CustomPainter. In this class, you’ll define the paint method, which is where the drawing logic lives.

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey.shade600
      ..strokeWidth = 2;

    const dashWidth = 6.0;
    const dashSpace = 4.0;
    double startX = 0;

    // Draw the top border
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
    
    // You can repeat this logic for the other three sides (right, bottom, left)
    // to draw a full rectangle.
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey.shade600
      ..strokeWidth = 2;

    const dashWidth = 6.0;
    const dashSpace = 4.0;
    double startX = 0;

    // Draw the top border
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
    
    // You can repeat this logic for the other three sides (right, bottom, left)
    // to draw a full rectangle.
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

This example only draws the top line. A complete painter for a rectangle would involve drawing all four sides, adjusting the logic for vertical lines.

Step 2: Use CustomPaint in Your Widget Tree

Now, wrap your Container with the CustomPaint widget and pass an instance of your painter to the painter property.

CustomPaint(
  painter: DashedLinePainter(),
  child: Container(
    height: 200,
    width: double.infinity,
    padding: const EdgeInsets.all(16),
    child: const Center(child: Text('Painted Border')),
  ),
)

CustomPaint(
  painter: DashedLinePainter(),
  child: Container(
    height: 200,
    width: double.infinity,
    padding: const EdgeInsets.all(16),
    child: const Center(child: Text('Painted Border')),
  ),
)

When to Use CustomPaint

• You have a very specific, non-rectangular shape.
• You need to animate the dashing pattern or color.
• You are building a performance-critical app and want to minimize package dependencies.

For most standard use cases, the dotted_border package is more practical and less error-prone.

Conclusion

So, there you have it!

• For a fast, easy, and reliable solution, use the dotted_border package.
• For maximum control and custom animations, or to avoid dependencies, master the CustomPaint widget.