flutter - 如何模糊一列中的多个图像？

Question

我已经尝试过https://medium.com/fluttervn/how-to-make-blur-effect-in-flutter-using-backdropfilter-imagefilter-559ffd8ab73的代码。但是它没有我想要的效果。

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(...),
],

我曾尝试将每张卡片都包装到一个容器中，但是以前的卡片甚至会变得越来越模糊，甚至是文字。我只希望在文本保持清晰的同时模糊每张卡的图像。

Answer 1

我还没有测试过，但是尝试使用Container小部件代替Image.asset。例如:

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),
  ),
),

由于每张卡都是相同的，因此您可以创建一个类作为构造函数，并且当您需要一张卡时，您只会添加 CardTemplate('text 1', 'assets/image1.jpg'),:

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),
     )
    ],
   ),
  );
 }
}

请注意，我尚未测试代码，因此可能会有一些语法或拼写错误