如何在Flutter中实现与参考图片一致的卡片组件

参考样式卡片：

当前使用的Widget代码：

Widget buildFavouriteCard(text, image, color) => Card(
  clipBehavior: Clip.antiAlias,
  margin: EdgeInsets.all(20),  
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30),
  ),
  child: Stack(
    alignment: Alignment.center,
    children: [  
      // InkWell(  
      //   onTap: (){},  
      // ),  
      Ink.image(
        image: NetworkImage(image),    
        child: ClipRRect(      
          child: BackdropFilter(        
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),        
            child: Container(          
              alignment: Alignment.center,          
              color: Colors.grey.withOpacity(0.1),        
            ),      
          ),    
        ),    
        height: 250,    
        fit: BoxFit.cover,  
      ),  
      Text(text,style:utils.textStyleCard(color)),
    ],
  ),
);

修改后的代码实现参考样式 #

Widget buildFavouriteCard(String text, String image, Color color) => Card(
  clipBehavior: Clip.antiAlias,
  margin: const EdgeInsets.all(20),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30),
  ),
  child: InkWell(
    onTap: () {}, // 此处添加自定义点击逻辑
    child: Stack(
      children: [
        // 清晰背景图片
        Ink.image(
          image: NetworkImage(image),
          height: 250,
          fit: BoxFit.cover,
        ),
        // 底部渐变遮罩，提升文字可读性
        Container(
          height: 250,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.transparent,
                Colors.black.withOpacity(0.6),
              ],
            ),
          ),
        ),
        // 底部定位文字
        Positioned(
          bottom: 20,
          left: 20,
          right: 20,
          child: Text(
            text,
            style: utils.textStyleCard(color),
            textAlign: TextAlign.center,
          ),
        ),
      ],
    ),
  ),
);

关键修改点说明 #

• 恢复并调整InkWell位置，将其作为Card直接子组件，确保整个卡片可点击并保留水波纹效果。
• 移除不必要的BackdropFilter模糊效果，匹配参考样式中清晰的背景图片展示。
• 添加底部渐变遮罩，从透明过渡到半透明黑色，强化文字与背景的对比度，提升可读性。
• 将文字从居中调整至底部，通过Positioned组件固定位置，与参考样式的文字布局一致。
• 明确参数类型，优化代码规范性。

内容的提问来源于stack exchange，提问作者Muhammad Talha Saeed