How to do blur multiple images in a column? - flutter

Question

I have tried the code from this https://medium.com/fluttervn/how-to-make-blur-effect-in-flutter-using-backdropfilter-imagefilter-559ffd8ab73. However its not having the effect I wanted.
children: <Widget>[
Card(
child: Stack(
children: <Widget>[
Stack(
children: <Widget>[
Center(
child: Image.asset(
'assets/image1.jpg',
fit: BoxFit.fill,
),
),
Container(
width: double.infinity,
height: 250,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
)
],
),
Center(
child: Text('Image 1'),
)
],
),
),
Card(...),
Card(...),
],
I have tried wrapping each individual card into a container but the previous cards keep getting blurred even the text. I only want the images of each individual card to be blurred while the text remains clear.

Answer 1

I haven't test it but try to use instead of Image.asset the Container widget . As the example:
Container(
width:x,
height:y,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/image1.jpg'),
fit: BoxFit.cover,
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
Since every card is the same you can create a class as a constructor and u will just add CardTemplate('text 1', 'assets/image1.jpg'), when u need a card:
class CardTemplate extends StatelessWidget{
String image;
String text;
CardTemplate(this.text,this.image);
#override
Widget build(BuildContext context) {
return Card(
child:Stack(
children: <Widget>[
Stack(
children: <Widget>[
Center(
child: Container(
width: double.infinity,
height: 250,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(this.image),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
)
),
Center(
child: Text(this.text),
)
],
),
);
}
}
Note I haven't tested the code so there will be maybe some syntax or typo errors