如何在飘动中向圆显示边框颜色

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

您可以在Container上使用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;
}
}