如何在 flutter 中将边框颜色显示为圆形？

Question

I would like to know how it is possible to set a border color of a circle. My code is:

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

So i use Clipoval for display a circle, i can set color of the circle and text in it without any problem but i need set the color of border of the circle. I want to display white circle with red border on white background

Answer 1

You can use BoxDecoration on your Container to achieve this. You don't need a ClipOval, instead you can apply shape parameter on BoxDecoration to get circular appearance.

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

Answer 2

Another thing to consider is the CustomPaint class. Here is an example:

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