Image de décoration floue dans Flutter

Question

J'ai le fond de mon jeu d'application comme si

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

Je veux brouiller la DecorationImage, alors j'ai ajouté un BackdropFilter au conteneur, mais je ne vois aucun changement. Qu'est-ce que je fais mal?

Answer 1

Vous pouvez faire quelque chose comme ceci, en rendant flou le conteneur enfant.

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

Capture d'écran