Как отобразить цвет границы на кружок во флаттере?

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 для отображения круга, я могу без проблем установить цвет круга и текст в нем, но мне нужно установить цвет границы круга. Я хочу отобразить белый круг с красной рамкой на белом фоне

Answer 1

Вы можете использовать BoxDecoration на вашем контейнере для достижения этой цели. Вам не нужен ClipOval, вместо этого вы можете применить параметр формы к BoxDecoration, чтобы получить круговой вид.

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

Еще одна вещь, которую следует учитывать, это класс 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;
  }
}