Strange blur in FLutter BackdropFilter - flutter

Question

I try on the Back drop Filter in the Flutter widget but get a strange effect. On the one hand there is a blur, on the other hand the objects retain clear boundaries. What am I doing wrong?
child: Stack(
children: <Widget>[
Positioned(
right: 10,
top: 10,
child: Container(
width: 100,
height: 100,
color: Color(0xFFbfeb91),
),
),
Positioned(
bottom: 10,
left: 50,
child: Container(
width: 90,
height: 90,
color: Colors.green,
),
),
Text('Hello world'),
Container(
width: 180,
height: 180,
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 100,
height: 100,
padding: EdgeInsets.all(24),
// color: Color(0xFF55aaff),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
),
),
),
],
)
I here is what I've got. Look at the green square - its bounds are clear, like we have 2 layers^ one is blured, and the other one (at the top) is NOT blured).
Picture with blur effect
And the same effect with letters 'Hello world'

Answer 1

You should give blur container position by margin as you are using stack as base widget. As you set postioned in above for two widget from top and left. so above two postined overleaped by blur container layout. thats why you getting blur screen. Try below code it will serve your purpose.
Stack(
children: <Widget>[
Positioned(
left: 10,
top: 10,
child: Container(
width: 100,
height: 100,
color: Color(0xFFbfeb91),
),
),
Positioned(
left: 10,
top: 120,
child: Container(
width: 90,
height: 90,
color: Colors.green,
),
),
Text('Hello world'),
Container(
margin: EdgeInsets.only(top: 10, left: 120),
width: 180,
height: 180,
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
width: 100,
height: 100,
padding: EdgeInsets.all(24),
// color: Color(0xFF55aaff),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
),
),
),
],
);