Flutter blur overlay

Question

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 1

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

Answer 2

In order to have a full screen blurred bg, with a slightly grey color (bgColor - Color(0xffbfbfbf)):

class MyOverlay extends StatelessWidget {
@override
Widget build(BuildContext context) {
final blur = 6.0; // 1.0 - very subtle, 9.0 - very strong blur

return Container(
  alignment: Alignment.center,
  color: Theme.of(context).bgColor.withOpacity(0.5),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
    child: Container(
      height: double.infinity,
      width: double.infinity,
      padding: EdgeInsets.all(24),
      // example content - centered logo with text below
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
             logo,
              height: 200,
              width: 200,
            ),
            Text(
              TranslationKeys.logoText.tr(),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ),
  ),
);

} }