Flutter blur overlay

Question

Asked by leodriesch on August 11, 2018 (source).

I want to make a dialog which instead of the usual material way of darkening the Widgets behind it blurs them. So essentially I would like to know if there is a way to blur not only an image, but the whole application(or parts of it)

Answer

Question answered by Google (source).

You can use the BackdropFilter to make the image actual blur and put the white overlay on that using below code. Here _value is the slider value which use can select. for ex. 10.0

@override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    SystemChrome.setEnabledSystemUIOverlays([]);
    // TODO: implement build
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      body: new Stack(children: <Widget>[
        new PageView.builder(
          itemBuilder: (context, pos) {
            return new Stack(
               children: <Widget>[
                 new FadeInImage(
                   fit: BoxFit.cover,
                   placeholder: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].thumb_img),
                   image: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].image_large),
                 ),
                new BackdropFilter(
                   filter: new ImageFilter.blur(sigmaX: _value, sigmaY: _value),
                   child: new Container(
                     decoration: new BoxDecoration(
                         color: Colors.white.withOpacity(_value)),
                   ),
                 )
               ],
            );
      );
)
DART FLUTTER
SHARE: