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

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.

Answer 2

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

Answer 3

All the above answers are correct, I'll reply to @user123456 here since I can't comment yet.

can i make the BoxDecoration image clickeble – user123456

Just wrap the whole Container with a GestureDetector

GestureDetector(
    onTap: () {...},
    child: Container(
        ...
        decoration: BoxDecoration(...),
    ),           
);

Answer 4

Output:

---

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