Flutter如何实现右下角图标效果？附示例图及现有代码

以下是修改后的代码，可实现你需要的右下角图标效果：

SizedBox(
  height: 150,
  width: 100,
  child: Card(
    elevation: 2,
    semanticContainer: true,
    shape: const RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    child: Stack(
      children: [
        Column(
          children: [
            ClipRRect(
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
              child: Image.network(
                'https://vipspar.com/wp-content/uploads/2021/12/6152-480x480.jpg',
                height: 90,
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(height: 8),
            const Text('Cornflacks'),
            const Text('MT 215'),
          ],
        ),
        Positioned(
          right: 8,
          bottom: 8,
          child: Container(
            height: 35,
            width: 35,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Color(0xffEAEFF2),
            ),
            child: IconButton(
              padding: EdgeInsets.zero,
              onPressed: () {},
              icon: const Icon(Icons.favorite_border, size: 20),
            ),
          ),
        ),
      ],
    ),
  ),
);

关键修改点： #

• 移除Card内部多余的Container，简化嵌套结构，Card本身已支持背景与圆角设置
• 用ClipRRect给图片添加顶部圆角，和Card的圆角样式保持统一
• 固定图片高度，避免图片挤压下方文字区域
• 调整Positioned的位置参数，将图标放在Card内部的右下角（而非超出容器范围）
• 统一圆形按钮的宽高（原代码宽高不一致无法形成正圆），并调整尺寸使其更协调
• 移除IconButton的默认内边距，让图标完全填充圆形容器
• 缩小图标尺寸，适配按钮大小

内容的提问来源于stack exchange，提问作者Jaini Shah