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