Blurred Decoration Image In Flutter

Answer :

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

Screenshot

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

It's better if you put in ClipRRect, like this :

Container(     child: ClipRRect(       child: Stack(         children: <Widget>[           FadeInImage.assetNetwork(           placeholder: placeholder,           image: thumbnail,           fit: BoxFit.cover,           ),           BackdropFilter(             child: Container(               color: Colors.black12,             ),             filter: ImageFilter.blur(sigmaY: 10, sigmaX: 10),           )         ],       ),     ),     width: double.infinity,   ), 

This case apply for Image (Thumbnail) list items correctly.