我正试图使一个圆圈看起来更生动。所以我想给它一个阴影,如何在Flutter中使用Paint类做到这一点
thumbPaint = Paint()
..color = Colors.white,
..style = PaintingStyle.fill;
答案 0 :(得分:3)
您可以使用MaskFilter来创建阴影效果。只需在绘制真实的circleA之前使用MaskFilter Paint绘制半径稍大的circleB,即可获得具有阴影效果的circleA。
查看此circle的以下代码。
class Painter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
double radius = 100.0;
canvas.translate(size.width/2, size.height/2);
Offset center = Offset(0.0, 0.0);
// draw shadow first
Path oval = Path()
..addOval(Rect.fromCircle(center: center, radius: radius+10));
Paint shadowPaint = Paint()
..color = Colors.black.withOpacity(0.3)
..maskFilter = MaskFilter.blur(BlurStyle.normal, 50);
canvas.drawPath(oval, shadowPaint);
// draw circle
Paint thumbPaint = Paint()
..color = Colors.white
..style = PaintingStyle.fill;
canvas.drawCircle(center, radius, thumbPaint);
}
@override
bool shouldRepaint(Painter oldDelegate) {
return false;
}
}
答案 1 :(得分:1)
您还可以使用drawShadow方法。
@override
void paint(Canvas canvas, Size size) {
var path = Path();
var myPaint = Paint();
var center = Offset(size.width / 2, size.height / 2);
myPaint.color = Color(0xff007AFF);
path.addOval(Rect.fromCircle(center: center, radius: 50.0));
canvas.drawShadow(path, Color(0xff000000), 3, true);
canvas.drawPath(path, myPaint);
}
结果:
答案 2 :(得分:0)
将其包装在Boxdecoration中。它具有BoxShadow属性 。
您可以关注this link。
new Container(
decoration: new BoxDecoration(
color: Colors.white,
border: new Border.all(
color: Colors.green,
width: 5.0,
style: BorderStyle.solid
),
borderRadius: new BorderRadius.only(
topLeft: new Radius.elliptical(40.0, 10.0),
bottomLeft: new Radius.circular(20.0),
),
boxShadow: [
new BoxShadow(
color: Colors.red,
offset: new Offset(20.0, 10.0),
)
],
image: new DecorationImage(
image: new AssetImage('assets/images/JL-Logo-150.png'),
)