如何在Flutter中为圆形添加边框颜色？

Question

我想知道如何设置圆形的边框颜色。我的代码是：

child: Container(
  child: ClipOval(
    child: Container(
      color: colorList[index],
      height: 30.0,
      width: 30.0,
      child: Center(
        child: new Text((index+1).toString(),
          style: TextStyle(color: Colors.white, fontSize: 24,fontWeight: FontWeight.w500),
            textAlign: TextAlign.center),
      ),
    ),
  ),
),

我使用Clipoval来显示一个圆圈，我可以轻松设置圆圈内的颜色和文本，但是我需要设置圆圈边框的颜色。 我想在白色背景上显示带有红色边框的白色圆圈。

- axis-medias

Answer 1

你可以在Container上使用BoxDecoration来实现这一效果。你不需要使用ClipOval，而是可以在BoxDecoration上应用shape参数来获得圆形外观。

Container(
   child: Container(
      decoration: BoxDecoration(
         color: Colors.grey,
         border: Border.all(color: Colors.red),
         shape: BoxShape.circle,
      ),
      height: 30.0,
      width: 30.0,
      child: Center(
         // Your Widget
      ),
   ),
),

- Midhun MP

---

@axis-medias：如果我的回答有帮助到您，请您接受它吗？这会给我很大的鼓励 :) - Midhun MP

我该怎么做？我不知道这个网站，请帮忙。 - axis-medias

@axis-medias：我的答案旁边有一个勾选标记，您可以单击它以接受它（靠近上下箭头）。供您参考：https://stackoverflow.com/tour - Midhun MP

谢谢你 :) 一般来说现在一切都很好，我已经接受了你的答案。 - axis-medias

Answer 2

另一个需要考虑的是CustomPaint类。以下是一个例子：

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.deepOrange;
    paint.strokeWidth = 5;
    paint.style = PaintingStyle.stroke;
    canvas.drawCircle(
        Offset(size.width / 2, size.height / 2), 80, paint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

- jurgenizer