When i use BackdropFilter in Container’s child, Phone screen going color black. and when i remove that coding. It shows background image. what’s going wrong?
I want to blur my background image of app. No errors shows. but final render is black screen. no any image
Stack(
children: [
//background image here with blur
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/u2.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
),
),
],),
>Solution :
Try to use BackdropFilter child
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/u2.jpg'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.0),
),
),
),
),
),
Test scaffold
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 200,
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img.png'),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10,
sigmaY: 10,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.0),
),
),
),
),
),
],
),
),
],
),
);