How to blur image in Container without blurring children Flutter? - image

Question

I only want the image of container blurred (line:16). This is the code:
itemBuilder: (BuildContext context, int index) {
return Stack(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 40, bottom: 20),
width: 250,
height: 450,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 2),
),
],
image: DecorationImage(
image: AssetImage(
Category_list[index]["background"]), //Blur this image
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
Category_list[index]["header"],
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w800,
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
width: 250,
height: 50,
//color: Colors.white,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
child: TextButton(
onPressed: () => {},
child: Text(
"Chat",
style: TextStyle(color: Colors.black),
),
),
),
),
],
),
),
],
);
But to use BackdropFilter you have to use the child-property from the container but this would blur everything. Does anybody know how to only blur the image? Do I have to separate the image-widget from the rest? And if so how does it still cover the complete Stack?

Answer 1

You can use Stack() widget to show your title or anything on top of your blurred image.
Small sample example
Container(
height: 150,
width:150,
decoration: new BoxDecoration(
color:Colors.black,
image: new DecorationImage(
image: new NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKgi8mXs-MtRnwuZVUKo1BwTXnKIl--6qZPzWmT4k3BV1wlN-vMgV2BdICGGHlekwnkVk&usqp=CAU'),
fit: BoxFit.cover,
),
),
child: Stack(
children:[
new BackdropFilter(
filter: new ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: new Container(
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
Text("Dog Name",style: TextStyle(fontSize: 22,),),
],
),
);