How do I blur a widget in fluttter

Here is sample code:

import 'dart:ui' as ui;

 Widget backdropFilterExample(BuildContext context, Widget child) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        child,
        BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 8.0,
            sigmaY: 8.0,
          ),
          child: Container(
            color: Colors.transparent,
          ),
        )
      ],
    );
  }

Google also has sample code on:

https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

You can create a Stack like:

First child: What you want to blur (in your case: Container)

Second child: BackdropFilter

And within the second child (BackdropFilter), there is the parameter child, which is used to insert a widget into the tree, that will not be affected by the BackdropFilter.

In your BackdropFilter, set filter: ImageFilter.blur(5.0, 5.0)

5.0 is amount of blur you wish.

I use BackdropFilter and Position.fill examples:

import 'dart:ui' as ui;

 Widget buildBlur({@required BuildContext context, @required Widget child}) {
    return Stack(
      children: <Widget>[
        child, // Your child
        Positioned.fill(
            child: BackdropFilter(
              filter: ui.ImageFilter.blur(
                sigmaX: 1.0,
                sigmaY: 1.0,
              ),
              child: Center(
               child: XedProgress.indicator(), // replace your loading widget
             ),
           ),
         )
      ],
    );
  }