¿Cómo dar un “borde punteado” en aleteo?

Solución:

Siempre que sea un borde discontinuo rectangular lo que desee, ahora puede usar el paquete dotted_border que he subido a Pub.

Uso

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

Utilice este componente:

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;
  }
}

Utilizando:

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

Puede usar dashPattern, un atributo que le permite especificar la secuencia de guiones pasando una matriz de dobles.

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

Este código da una secuencia discontinua de ancho 6, espacio 3, ancho 2, espacio 3, …. y esto continúa.

Para obtener una línea discontinua en la pantalla, 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(),
),

---

---

Utiliza Nuestro Buscador