在同一个小部件上使用边框和边框半径

【问题标题】：Use border and border radius on the same widget在同一个小部件上使用边框和边框半径
【发布时间】：2020-10-10 20:39:53
【问题描述】：

大家我怎么能像这个图标的边框一样颤动我只需要为左侧、底部和顶部设置颜色我听到有人谈论 customPainter，但我不知道如何使用请帮助我： enter image description here

这是我的代码：

Container(      
   decoration:BoxDecoration(
    shape: BoxShape.circle,
     border: new Border(
      left: BorderSide(
      color: Theme.of(context).primaryColor,
      width: 2,),
      right: BorderSide(
      color: Theme.of(context).primaryColor,
      width: 2,),
      bottom: BorderSide( color: Theme.of(context).primaryColor,
      width: 2,),
      top: BorderSide(color: Theme.of(context).primaryColor,
      width: 2,),),
       ) ,
      child:ClipOval(
      child: Image.asset('images/imageout1.png',width: 85,), 
                                                ))

【问题讨论】：

标签： flutter border border-radius

【解决方案1】：

如您所说，您可以使用CustomPainter。关键是drawArc的使用

在您的小部件构建方法中的某处返回它

CustomPaint(
    size: Size.square(100),
    painter: CirclePainter(),
)

创建CirclePainter

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint innerLine = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    Paint outerLine = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0;

    canvas.drawArc(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2),
        0, 2 * pi, false, innerLine);

    canvas.drawArc(
        Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: (size.width + 12) / 2),
        1.9 * pi,
        1.2 * pi,
        false,
        outerLine);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

结果

【讨论】：