Flutter中Color变量调用shade100报错问题求助

定义了存储颜色值的变量objeColor，通过setState更新页面时会修改该颜色，希望同时使用该颜色的普通状态和shade100状态，但代码报错。

代码示例 #

late Color objeColor;
objeColor = Colors.orange;

Container(
   decoration: BoxDecoration(
   shape: BoxShape.circle,
   color: objeColor, // 此处无错误
   ),),


Container(
   decoration: BoxDecoration(
   shape: BoxShape.circle,
   color: objeColor.shade100, // 此处报错
),),

报错信息 #

The getter 'shade100' isn't defined for the type 'Color'.
Try importing the library that defines 'shade100', correcting the name to the name of an existing getter, or defining a getter or field named 'shade100'

解决方法 #

原因分析 #

Colors.orange属于MaterialColor类型，该类型内置了shade100、shade200等不同亮度的颜色变体；但你将objeColor声明为Color类型——Color是所有颜色类的基类，并不包含shade100这类专属getter，因此直接调用会触发报错。

方案一：修改变量类型为MaterialColor #

如果你的颜色始终是MaterialColor类型（比如Colors.red、Colors.blue这类系统预设颜色），直接将变量类型改为MaterialColor即可：

late MaterialColor objeColor;
objeColor = Colors.orange;

// 此时调用shade100正常
Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: objeColor.shade100,
  ),
)

方案二：兼容非MaterialColor场景 #

如果需要兼容自定义Color等非MaterialColor类型的颜色，可以先做类型判断，再处理：

late Color objeColor;
objeColor = Colors.orange;

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: objeColor is MaterialColor 
        ? objeColor.shade100 
        : objeColor.withOpacity(0.1), // 非MaterialColor时的替代逻辑，可根据需求调整
  ),
)

内容的提问来源于stack exchange，提问作者Hasancan Çakıcıoğlu