Blurred Decoration Image in Flutter

Question

I have the background of my app set like so:

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/lol/aatrox.jpg'),             fit: BoxFit.cover,           ),         ),         child: new BackdropFilter(filter: new ImageFilter.blur(sigmaX: 600.0, sigmaY: 1000.0)),         width: 400.0,       ),     );   } } 

I'm wanting to blur the DecorationImage, so I added a BackdropFilter to the Container, but I don't see any change. What am I doing wrong?

Answer 1

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)),           ),         ),       ),     );   } } 

Answer 2

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),         ),       ),     ),   ), )