Skip to content

Instantly share code, notes, and snippets.

@trietbui85
Last active September 30, 2019 07:38
Show Gist options
  • Save trietbui85/f3c07253d5c385387c58d47f2d5c51dd to your computer and use it in GitHub Desktop.
Save trietbui85/f3c07253d5c385387c58d47f2d5c51dd to your computer and use it in GitHub Desktop.
Blur multiple widgets. The correct Widget tree must be: Stack > [Widget1ToBlur, Widget2ToBlur, …, Container > BackdropFilter]
/* Copyright (c) 2019 - Bui Minh Triet - x3cafe@gmail.com - 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;
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),
),
),
)
],
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment