How to have a dotted line on one side of container?

Question

How can I add a dotted border for a container but for only one side but also with border radius?

There are packages like dotted_border and fdottedline , but they both do around the whole container.

I'm trying to achieve this

Answer 1

You can use the plugin dotted_decoration to achieve the required design.

Code:-

          Container(
                      decoration: DottedDecoration(
                        color: Colors.white,
                        strokeWidth: 0.5,
                        linePosition: LinePosition.right,
                      ),
                      height:120,
                      width: 50,
                    ),

Answer 2

As mentioned in another thread there isn't a default way of implementing this yet, however the method detailed in this answer seems to get you part way there. There are also a few other approaches to this problem in there too which may be of help.

Answer 3

It is not possible with an actual border. especially not since the curved part of the border is still solid in your picture. However, I managed to get the desired result by overlaying a dotted line at the center between two containers with a solid border, using a Stack

class MyWidget extends StatelessWidget {
  static const double _height = 500;
  static const double _width = 500;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      width: _width + 30,
      height: _height + 30,
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Row(
              children: [
                _container(),
                _container(),
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            ),
            CustomPaint(
                foregroundPainter: DashedLinePainter(),
                child: Container(
                    width: 5, color: Colors.white, height: _height - 30)),
          ],
        ),
      ),
    );
  }

  Widget _container() {
    return Container(
      height: _height,
      width: _width / 2,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blueAccent,
          width: 2,
        ),
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
    );
  }
}

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 9, dashSpace = 5, startX = size.width / 2, startY = 0;
    final paint = Paint()
      ..color = Colors.blueAccent
      ..strokeWidth = 2;
    while (startY < size.height) {
      canvas.drawLine(
          Offset(startX, startY), Offset(startX, startY + dashWidth), paint);
      startY += dashWidth + dashSpace;
    }
  }

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

This code renders this:

Answer 4

This package is the best of all, you can even choose the border side to render the dash https://pub.dev/packages/mobkit_dashed_border