问题:

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

回答1:

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

转载请标明出处:How to give a “Dashed Border” in flutter?

文章来源: How to give a “Dashed Border” in flutter?

标签

border

Flutter