请教如何实现指定样式的Flutter Container组件(附参考图与背景色)
调整后的Flutter Container组件实现
根据目标样式要求,以下是修改后的Container代码,完全匹配#0E8375背景色及参考样式的质感:
Container( width: MediaQuery.of(context).size.width / 1.1, height: MediaQuery.of(context).size.height / 6, padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), decoration: BoxDecoration( color: Color(0xFF0E8375), // 目标背景色#0E8375 borderRadius: BorderRadius.circular(15), boxShadow: [ // 深色阴影增强底部立体感 BoxShadow( color: Color(0xFF0A665B), offset: Offset(0, 2), blurRadius: 4, spreadRadius: 0, ), // 浅色高光模拟内发光效果 BoxShadow( color: Color(0xFF129C8C), offset: Offset(0, -1), blurRadius: 3, spreadRadius: 0, ), ], ), // 示例子组件,匹配参考样式的内容布局 child: Row( children: [ Icon(Icons.water_drop, color: Colors.white, size: 24), SizedBox(width: 12), Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text("饮水量", style: TextStyle(color: Colors.white70, fontSize: 14)), SizedBox(height: 4), Text("1200ml", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ], ), ], ), )
关键修改说明
- 替换背景色为
Color(0xFF0E8375),直接对应十六进制目标色值 - 添加双层阴影实现参考样式的细腻质感,通过深浅色模拟内发光和立体感
- 增加内边距
padding,方便后续内容布局 - 补充示例子组件(图标+文本),匹配参考样式的内容结构
- 优化宽高获取方式,直接通过
MediaQuery获取屏幕尺寸(若已提前定义screenWidth/screenHeight,可保留原写法)
内容的提问来源于stack exchange,提问作者Tdayo
相关产品推荐
相关产品推荐

