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

Question

每个人，我如何像扑朔迷离中的这个图标的边框 我只需要为左侧，底部和顶部设置颜色 我听说有人谈论customPainter，但我不知道如何使用plz可以帮助我： 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,), 
                                                ))

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

结果