How To Set A Backdropfilter Using Dynamic-sized Widgets In Flutter

I have a column: header with text, body with image, footer with text, all widgets have transparent backgrounds. I want to set the background using a blur of the main image but I ke

Solution 1:

You can explicitly give a fix height to the container that contains the image, which will even look better.

In this example I have set three images of very different dimensions and has no problem rendering.

Refer the below code:

classMyAppextendsStatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnnewScaffold(
      appBar: new AppBar(
        title: new Text('So Help'),
      ),
      body: new ListView(
        children: <Widget>[
          MyContainer(
            imageUrl:
                'https://i.dailymail.co.uk/i/pix/2017/01/16/20/332EE38400000578-4125738-image-a-132_1484600112489.jpg',
          ),
          MyContainer(
            imageUrl:
                'http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg',
          ),
          MyContainer(
            imageUrl:
                'http://wackymania.com/image/2011/6/vertical-panoramic-photography/vertical-panoramic-photography-15.jpg',
          ),
        ],
      ),
    );
  }
}

classMyContainerextendsStatelessWidget {
  finalStringimageUrl;

  MyContainer({@required this.imageUrl});

  @overrideWidgetbuild(BuildContext context) {
    returnnewContainer(
      height: 300.0,
      child: new Stack(
        children: <Widget>[
          new Container(
            child: Image.network(
              this.imageUrl,
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover,
            ),
          ),
          BackdropFilter(
            filter: Dui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: new Container(
              color: Colors.transparent,
            ),
          ),
          new Container(
            height: 300.0,
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: new Text(
                    'Header',
                    style: new TextStyle(color: Colors.white),
                  ),
                ),
                new Expanded(
                  child: Image.network(imageUrl),
                ),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: new Text(
                    'Footer',
                    style: new TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Solution 2:

I think you can consider using Positioned widget - it has width and height property. We can combine these widgets: Positioned > ClipRect > BackdropFilter. Please refer to the Gist: https://gist.github.com/anticafe/dc84cf6488d9defea437b702b13e2749#file-blur_multiple_widgets_with_dynamic_region-dart

Let take a look at this article to see more about BackdropFilter.