Flutter新手如何实现参考图中的两个自定义盒子样式？

• 无需引入第三方依赖，用Flutter原生组件组合即可实现，核心用到Container、BoxDecoration、Row/Column等基础组件。
• 先确定两个盒子的排列方向：垂直排列用Column作为外层容器，水平排列用Row，可以通过SizedBox或者mainAxisAlignment配置两个盒子之间的间距。
• 单个盒子的样式通过Container的decoration属性配置即可，参考代码如下：

// 基础盒子示例
Container(
  // 按需调整盒子宽高
  width: 320,
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 24),
  decoration: BoxDecoration(
    // 背景色，如需渐变可替换为gradient属性
    color: Colors.white,
    // 圆角大小按需调整
    borderRadius: BorderRadius.circular(16),
    // 阴影效果配置
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 10,
        offset: const Offset(0, 4),
      )
    ],
  ),
  // 这里放盒子内部的内容组件，比如文本、图标等
  child: const Text("盒子内部内容"),
)

• 如果需要实现差异化样式的盒子，比如其中一个用渐变背景，只需要修改BoxDecoration配置即可：

BoxDecoration(
  // 替换color为渐变配置
  gradient: const LinearGradient(
    colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  borderRadius: BorderRadius.circular(16),
  boxShadow: const [
    BoxShadow(
      color: Color(0x662575FC),
      blurRadius: 10,
      offset: Offset(0, 4),
    )
  ],
)

• 将两个配置好的盒子组件放入外层的Row/Column中，运行即可看到对应效果，所有尺寸、颜色、圆角、阴影参数都可以根据你的实际需求调整数值。

内容的提问来源于stack exchange，提问作者Kavach Dheer