Flutter blur overlay

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

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

} }

In your case, we can combine these widgets by order: Stack > [Widget1ToBlur, Widget2ToBlur,... , Container > BackdropFilter].

double _sigmaX = 0.0; // from 0-10
double _sigmaY = 0.0; // from 0-10
double _opacity = 0.1; // from 0-1.0
double _width = 350;
double _height = 300;

Stack(
  children: <Widget>[
    Image.asset(
      'assets/images/${images[_imageIndex]}',
      width: _width,
      height: _height,
      fit: BoxFit.cover,
    ),
    FlutterLogo(size: 80, colors: Colors.red),
    Container(
      width: _width,
      height: _height,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
        child: Container(
          color: Colors.black.withOpacity(_opacity),
        ),
      ),
    )
  ],
);

This article will give you info about BackdropFilter.