I am trying to make a circle appear more material. So I want to give it a shadow of some sort how do I do it with the Paint class in flutter
thumbPaint = Paint()
..color = Colors.white,
..style = PaintingStyle.fill;
I am trying to make a circle appear more material. So I want to give it a shadow of some sort how do I do it with the Paint class in flutter
thumbPaint = Paint()
..color = Colors.white,
..style = PaintingStyle.fill;
You can use a MaskFilter to create shadow effect. Just draw a circleB with slightly bigger radius using MaskFilter Paint before drawing your real circleA, you can get a circleA with shadow effect.
Check out this circle drew with below codes.
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;
}
}
You could also use the drawShadow method.
@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);
}
Result:
Wrap it in a Boxdecoration.It has BoxShadow property.
You can follow 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'),
)