Blurred Decoration Image in Flutter
Screenshot:
Using Stack
:
SizedBox(
height: 200,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset('chocolate_image', fit: BoxFit.cover),
ClipRRect( // Clip it cleanly.
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
color: Colors.grey.withOpacity(0.1),
alignment: Alignment.center,
child: Text('CHOCOLATE'),
),
),
),
],
),
)
Without using Stack
:
Container(
height: 200,
width: double.maxFinite,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("your_chocolage_image"),
fit: BoxFit.cover,
),
),
child: ClipRRect( // make sure we apply clip it properly
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
alignment: Alignment.center,
color: Colors.grey.withOpacity(0.1),
child: Text(
"CHOCOLATE",
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
),
),
),
)
You could do something like this, by blurring the container child instead.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage('assets/dog.png'),
fit: BoxFit.cover,
),
),
child: new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
),
);
}
}