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

Viewed 2183
3 Answers

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.

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: Containers separated by dashed border

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,
                    ),
Related