How to give a "Dashed Border" in flutter?

Question

I try to give dashed border in flutter but there is no option for dashed border in flutter. so any another way to create dashed border in futter.

  new Container(
          decoration: new BoxDecoration(
              border: Border(
                  left: BorderSide(color: Color(0XFFFF6D64), width: 2.0))),
          height: 20.0,
          margin: const EdgeInsets.only(left: 35.0),
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new DecoratedBox(
                decoration: new BoxDecoration(
                    border: Border(
                        left:
                            BorderSide(color: Color(0XFFFF6D64), width: 2.0,style: BorderStyle.))),

              )
            ],
          ),
        ),

See https://github.com/flutter/flutter/issues/4858#issuecomment-387492774 — Günter Zöchbauer, Jul 19 '18 at 09:30
See [this answer](https://stackoverflow.com/a/55428017/6891637) — Ajil O., Mar 30 '19 at 04:10

score 24 · Answer 1 · edited Sep 22 '21 at 17:39

24

As long as it is a Rectangular dashed border you want, you can now use dotted_border package which I have uploaded to Pub.

Usage

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

edited Sep 22 '21 at 17:39

Md. Yeasin Sheikh

54,221
7
29
56

answered May 21 '19 at 06:20

Ajil O.

6,562
5
40
72

Does it support circular corners? – kageeker Jun 10 '20 at 21:15
@kageeker It does. You need to set BorderType and BorderRadius properties. – Ajil O. Jun 11 '20 at 04:14
2

Is there a way to use this plugin to only use border on some sides? – progNewbie Nov 13 '20 at 09:51

score 12 · Accepted Answer · edited Feb 11 '21 at 23:20

Use this component:

import 'dart:math';

import 'package:flutter/material.dart';

class CircularBorder extends StatelessWidget {

  final Color color;
  final double size;
  final double width;
  final Widget icon;

  const CircularBorder({Key key, this.color = Colors.blue, this.size = 70, this.width = 7.0, this.icon}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      alignment: Alignment.center,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          icon == null ? Container() : icon,
          CustomPaint(
            size: Size(size, size),
            foregroundPainter: new MyPainter(
                completeColor: color,
                width: width),
          ),
        ],
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  Color lineColor =  Colors.transparent;
  Color completeColor;
  double width;
  MyPainter(
      { this.completeColor, this.width});
  @override
  void paint(Canvas canvas, Size size) {
    Paint complete = new Paint()
      ..color = completeColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;

    Offset center = new Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);
    var percent = (size.width *0.001) / 2;

    double arcAngle = 2 * pi * percent;
    print("$radius - radius");
    print("$arcAngle - arcAngle");
    print("${radius / arcAngle} - divider");

    for (var i = 0; i < 8; i++) {
      var init = (-pi / 2)*(i/2);
      
      canvas.drawArc(new Rect.fromCircle(center: center, radius: radius),
          init, arcAngle, false, complete);
    }

 
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Using:

CircularBorder(
          width: 6,
          size: 55,
          color: Colors.grey,
          icon: Icon(Icons.access_alarm, color: Colors.grey),
        ),

Please explain var percent = (size.width *0.001) / 2; double arcAngle = 2 * pi * percent — Zar E Ahmer, Feb 15 '23 at 11:19

score 9 · Answer 3 · edited Jun 22 '21 at 12:03

For rounded corners using this, you can use

    CardRadius = 10.0;

    return DottedBorder(
      color: Colors.black,
      strokeWidth: 3,
      radius: Radius.circular(CardRadius),
      dashPattern: [10, 5],
      customPath: (size) {
        return Path()
          ..moveTo(CardRadius, 0)
          ..lineTo(size.width - CardRadius, 0)
          ..arcToPoint(Offset(size.width, CardRadius), radius: Radius.circular(CardRadius))
          ..lineTo(size.width, size.height - CardRadius)
          ..arcToPoint(Offset(size.width - CardRadius, size.height), radius: Radius.circular(CardRadius))
          ..lineTo(CardRadius, size.height)
          ..arcToPoint(Offset(0, size.height - CardRadius), radius: Radius.circular(CardRadius))
          ..lineTo(0, CardRadius)
          ..arcToPoint(Offset(CardRadius, 0), radius: Radius.circular(CardRadius));
      },
      child: Container(...)
    }

This is what it looks like

Instead of the complex path, you can also use "radius: Radius.circular(20), borderType: BorderType.RRect," for round borders — maxmitz, Jul 28 '22 at 14:55
@maxmitz with the complex path, you can disable the border on any side if you want — Tanjim ahmed, Sep 12 '22 at 19:50

score 2 · Answer 4 · answered Dec 20 '19 at 15:05

I am using dotted_border plugin for this-

import 'package:flutter/material.dart';

import 'package:dotted_border/dotted_border.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Dotted Border'),
          ),
          body: SafeArea(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    container1,
                    Spacer(),
                    container2,
                    Spacer(),
                    container3,
                    Spacer(),
                    container4,
                  ],
                ),
              ),
            ),
          )),
    );
  }

  Widget get container1 {
    return DottedBorder(
      padding: EdgeInsets.all(4),
      dashPattern: [9, 5],
      child: Container(
        height: 110,
        width: double.maxFinite,
        decoration: BoxDecoration(
          color: Color(0xff994444),
        ),
      ),
    );
  }

  Widget get container2 {
    return DottedBorder(
      padding: EdgeInsets.all(8),
      dashPattern: [6],
      borderType: BorderType.Circle,
      child: Container(
        height: 210,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: CircleBorder(),
          color: Color(0xff444499),
        ),
      ),
    );
  }

  Widget get container3 {
    return DottedBorder(
      padding: EdgeInsets.all(4),
      borderType: BorderType.RRect,
      radius: Radius.circular(20),
      child: Container(
        height: 120,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
          color: Color(0xff994444),
        ),
      ),
    );
  }

  Widget get container4 {
    return DottedBorder(
      borderType: BorderType.Oval,
      dashPattern: [8,4,2,4],
      child: Container(
        height: 180,
        width: double.maxFinite,
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
          color: Color(0x22888888),
        ),
      ),
    );
  }
}

score 2 · Answer 5 · answered Jun 23 '20 at 13:51

You can use dashPattern, an attribute which allows you to specify the Dash Sequence by passing in an Array of Doubles.

DottedBorder(
    dashPattern: [6, 3, 2, 3], 
    child: ...
);

This code gives a dashed sequence of width 6, space 3, width 2, space 3,.... and this continues.

To get a Dashed line across the screen, use

DottedBorder(
  color: Color(0xFFE9EBF5),
  strokeWidth: 1,
  radius: Radius.circular(10),
  dashPattern: [5, 5],
  customPath: (size) {
    return Path()
      ..moveTo(0, 10)
      ..lineTo(size.width, 10);
  },
  child: Container(),
),

Hamza Vedat Cengiz · Answer 6 · 2023-08-31T09:13:32.203

https://pub.dev/packages/mobkit_dashed_border You can use this package. This package doesn't use a widget. It's create a new border type. You can use it anywhere you use border.

Container(
    height: 75,
    decoration: const BoxDecoration(
        border: DashedBorder.fromBorderSide(
            dashLength: 15, side: BorderSide(color: Colors.black, width: 2)),
        borderRadius: BorderRadius.all(Radius.circular(10))),
    child: const Center(
        child: Text(
            'Rounded same color and width',
        ),
    ),
),

Container(
    height: 75,
    decoration: const BoxDecoration(
    border: DashedBorder(
        dashLength: 15,
        left: BorderSide(color: Colors.black, width: 2),
        top: BorderSide(color: Colors.red, width: 2),
        right: BorderSide(color: Colors.orange, width: 2),
        bottom: BorderSide(color: Colors.blue, width: 2),
    ),
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(0),
        topRight: Radius.circular(20),
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(0),
    ),
    ),
    child: const Center(
        child: Text(
            'Different rounded and color',
        ),
    ),
),

score -1 · Answer 7 · answered Mar 31 '22 at 14:42

Container(
      margin: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      height: 16,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        color: ThemeConstants.blueGreyDivider,
        borderRadius: BorderRadius.circular(100),
      ),
      child: SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(
            MediaQuery.of(context).size.width ~/ (10 + 5),
            (_) => Container(
              width: 10,
              height: 2,
              color: Colors.white,
              margin: EdgeInsets.only(left: 10 / 2, right: 5 / 2),
            ),
          ),
        ),
      ),
    )

Blockquote

How to give a "Dashed Border" in flutter?

7 Answers7

Usage

Linked