Skip to content

Instantly share code, notes, and snippets.

@trietbui85
Last active September 30, 2019 07:39
Show Gist options
  • Save trietbui85/e6f0ce593ba80f84006634b9df776ebe to your computer and use it in GitHub Desktop.
Save trietbui85/e6f0ce593ba80f84006634b9df776ebe to your computer and use it in GitHub Desktop.
Blur the Flutter Container with decoration as image
/* 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
Container(
width: 350,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
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