Flutter: Add box shadow to a transparent Container
As you can see in the BoxShadow
class, they subclass the toPaint()
method like this :
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
... with BlurStyle.normal
instead of BlurStyle.outer
as we wanted.
Let's just create a custom BoxShadow
that takes the BlurStyle
as parameter.
import 'package:flutter/material.dart';
class CustomBoxShadow extends BoxShadow {
final BlurStyle blurStyle;
const CustomBoxShadow({
Color color = const Color(0xFF000000),
Offset offset = Offset.zero,
double blurRadius = 0.0,
this.blurStyle = BlurStyle.normal,
}) : super(color: color, offset: offset, blurRadius: blurRadius);
@override
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
}
Now we can use it like this :
new CustomBoxShadow(
color: Colors.black,
offset: new Offset(5.0, 5.0),
blurRadius: 5.0,
blurStyle: BlurStyle.outer
)
Container(
height: 200.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 10.0, // soften the shadow
spreadRadius: 7.0, //extend the shadow
offset: Offset(
5.0, // Move to right 10 horizontally
5.0, // Move to bottom 5 Vertically
),
)
],
),
child: Text(" ð¹", style:TextStyle(fontSize:30)),
);