如何为Flutter ElevatedButton设置自定义十六进制非Material背景色？

你遇到的问题并非无法使用非Material颜色，而是颜色值的透明度通道设置错误：

你传入的Color(0x00170E04)中，前两位0x00代表完全透明的alpha通道，这意味着按钮背景实际上是透明状态，所以看起来还是ElevatedButton的默认蓝色。

修正步骤 #

1. 修正颜色值 #

将颜色的alpha通道改为0xFF（完全不透明），即目标颜色应为：

const Color(0xFF170E04)

2. 正确配置按钮样式 #

ElevatedButton支持两种方式设置自定义背景色：

方式一：使用styleFrom（推荐）

注意：Flutter 3.13及以上版本中，primary参数已被弃用，改用backgroundColor：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: const Color(0xFF170E04), // 旧版本用primary: const Color(0xFF170E04)
  ),
  onPressed: () => Future.delayed(
    const Duration(seconds: 1),
    () => context.read<DiceBloc>().add(RollDice())
  ),
  child: const Text('Lancia i dadi')
),

方式二：使用ButtonStyle + MaterialStateProperty

如果需要针对不同状态（如按下、禁用）设置不同颜色，可使用这种方式：

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(const Color(0xFF170E04)),
    // 可选：设置文本颜色避免与背景冲突
    foregroundColor: MaterialStateProperty.all(Colors.white),
  ),
  onPressed: () => context.read<DiceBloc>().add(ResetDice()),
  child: const Text('Nuovo turno'),
),

验证 #

修正后，按钮背景会显示你指定的#170E04颜色，ElevatedButton完全支持自定义非Material颜色，只要颜色值和样式配置正确即可生效。

内容的提问来源于stack exchange，提问作者Thomas Herondale