How to give a "Dashed Border" in flutter?
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),
)
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),
),