Используйте границу и радиус границы в одном виджете - PullRequest
Новая
       68

Используйте границу и радиус границы в одном виджете

0 голосов
/ 20 июня 2020
• 1000 описание изображения здесь

это мой код: 

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

1 Ответ

1 голос
/ 20 июня 2020

Как вы сказали, вы можете использовать CustomPainter. Ключ заключается в использовании drawAr c

Верните это где-нибудь в методе сборки виджета 

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

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

Результат

введите описание изображения здесь

...