Blur multiple widgets. The correct Widget tree must be: Stack > [Widget1ToBlur, Widget2ToBlur, …, Positioned > ClipRect > BackdropFilter]

blur_multiple_widgets_with_dynamic_region.dart

/* Copyright (c) 2019 - Bui Minh Triet - [email protected] - http://fluttervn.com */
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;
double _blurWidth = _width / 2;
double _blurHeight = _height / 2;

Stack(
  children: <Widget>[
    Image.asset(
      'assets/images/background.jpg',
      width: _width,
      height: _height,
      fit: BoxFit.cover,
    ),
    FlutterLogo(size: 80, colors: Colors.red),
    Positioned(
      top: 0,
      left: 0,
      width: _blurWidth,
      height: _blurHeight,
      // Note: without ClipRect, the blur region will be expanded to full
      // size of the Image instead of custom size
      child: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
          child: Container(
            color: Colors.black.withOpacity(_opacity),
          ),
        ),
      ),
    )
  ],
);