如何在Flutter中实现如图所示的Container组件？

图中的容器是带圆角、阴影效果的卡片式组件，以下是具体实现代码：

Container(
  padding: const EdgeInsets.all(16.0),
  width: 300,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(12.0),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 5,
        offset: const Offset(0, 3),
      ),
    ],
  ),
  child: const Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        "示例标题",
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8),
      Text(
        "这里是容器内的描述文本",
        style: TextStyle(fontSize: 14),
      ),
    ],
  ),
)

关键属性说明 #

• borderRadius：控制容器圆角弧度，可根据视觉需求调整数值
• boxShadow：通过阴影营造立体感，spreadRadius控制阴影扩散范围，blurRadius控制模糊程度，offset控制阴影偏移方向
• color：设置容器背景色，Colors.grey[200]匹配图中的浅灰色调
• padding：给容器内部内容添加间距，避免内容紧贴容器边缘

内容的提问来源于stack exchange，提问作者Mussadaq Ahmad Jamil