Search code examples
dartflutter

How to give a "Dashed Border" in flutter?


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

              )
            ],
          ),
        ),

Solution

  • Image

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