Flutter中如何设置类似示例图中图标的透明黑色背景色？

要实现示例图中那种半透明黑色的背景效果，你可以通过以下几种方式在Flutter中设置带透明度的黑色：

1. 使用Color.fromARGB() #

通过指定alpha（透明度，范围0-255，0为全透明，255为完全不透明）和RGB值定义颜色，示例效果对应的参数大概是：

Color.fromARGB(180, 0, 0, 0)

• 180是透明度值，数值越小背景越透明，可按需调整

2. 使用Color.fromRGBO() #

这种方式通过opacity（透明度，范围0-1，0为全透明，1为完全不透明）控制，和上面的效果对应：

Color.fromRGBO(0, 0, 0, 0.7)

• 0.7对应约70%的不透明度，和ARGB的180（255*0.7≈178.5）效果接近

3. 十六进制颜色写法 #

Flutter支持0xAARRGGBB格式的十六进制颜色，其中AA是透明度的十六进制值（00为全透明，FF为完全不透明），示例效果对应的写法：

const Color(0xB4000000)

• B4是十进制180的十六进制表示，可修改这个值调整透明度

实际使用示例 #

如果要给图标添加这种背景，用Container包裹并搭配圆角：

Container(
  width: 60,
  height: 60,
  decoration: BoxDecoration(
    color: Color.fromARGB(180, 0, 0, 0),
    borderRadius: BorderRadius.circular(12), // 匹配示例的圆角效果
  ),
  child: const Icon(
    Icons.phone,
    color: Colors.white,
    size: 30,
  ),
  alignment: Alignment.center,
)

内容的提问来源于stack exchange，提问作者Mohamed Shafeeq