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
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
),
),
),
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.