flutter - 颤振拉环
问题描述
请问我正在尝试使用自定义油漆在颤振中绘制一个环,有没有关于如何实现它的想法?
当我尝试像这样实现它但它不被接受,因为我需要阴影更专业:
Stack(
alignment: Alignment.center,
children: [
Container(
height: 180,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 2,
spreadRadius: 1,
offset: Offset(0, 2)),
],
),
),
Container(
height: 150,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 2,
spreadRadius: 1,
offset: Offset(0, 2)),
],
),
),
],
),
解决方案
是的,使用自定义油漆可以轻松完成。
class MyHome extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Center(
child: Container(
height:200,
width:200,
child:CustomPaint(
painter:RingPainter(),
),
),
),
);
}
}
class RingPainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
double height=size.height;
double width=size.width;
//Paint to draw ring shape
Paint paint=Paint()..color=Colors.green..strokeWidth=16.0
..style=PaintingStyle.stroke..strokeCap=StrokeCap.round;
//defining Center of Box
Offset center=Offset(width/2,height/2);
//defining radius
double radius=min(width/2,height/2);
canvas.drawCircle(center,radius,paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}