如何创建与示例图片样式一致的Flutter Widget

从你提供的图片样式来看，这是一个带圆形背景、中间显示“Icon”文本的组件，Flutter里没有完全匹配的现成Material组件，但可以通过自定义轻松实现，下面给你两种实用方案：

方案一：纯自定义Container（无交互） #

适合不需要点击功能的静态展示场景，灵活性最高：

Container(
  width: 60, // 组件宽高，按需调整
  height: 60,
  decoration: BoxDecoration(
    color: Colors.blue.shade50, // 背景色，可替换成你需要的颜色
    shape: BoxShape.circle, // 圆形外观
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 3,
        offset: const Offset(0, 2), // 模拟图片里的轻微阴影
      ),
    ],
  ),
  child: const Center(
    child: Text(
      'Icon',
      style: TextStyle(
        color: Colors.blue,
        fontSize: 14,
        fontWeight: FontWeight.w500,
      ),
    ),
  ),
)

方案二：基于ElevatedButton实现（带交互） #

如果需要点击事件，推荐用Material按钮组件改造，自带按压、阴影等Material交互效果：

ElevatedButton(
  onPressed: () {
    // 这里写点击后的逻辑
  },
  style: ElevatedButton.styleFrom(
    fixedSize: const Size(60, 60),
    shape: const CircleBorder(),
    backgroundColor: Colors.blue.shade50,
    elevation: 2, // 阴影高度，和图片效果匹配
  ),
  child: const Text(
    'Icon',
    style: TextStyle(
      color: Colors.blue,
      fontSize: 14,
      fontWeight: FontWeight.w500,
    ),
  ),
)

你可以根据图片里的实际配色、尺寸调整参数，比如修改color值、width/height大小，新手直接把代码复制到项目里就能看到效果，再慢慢微调即可。

内容的提问来源于stack exchange，提问作者Luso Dev