Flutter返回Widget的函数内无法使用自定义Color类颜色如何解决

问题场景 #

开发Flutter应用时，希望实现类似Android中values/color.xml的全局颜色统一管理能力，将颜色值单独存放在独立类中方便全局调用，但在返回Widget的独立函数中使用自定义类的颜色属性时无法正常显示，相同颜色属性在build函数中使用则正常生效。

自定义颜色类代码：

import 'package:flutter/material.dart';

class ColorValues {
  static Color highlightColor = const Color(0xFF202d35);
}

存在问题的业务代码：

Container currentPage() {
    return Container(
      height: 20.0,
      width: double.infinity,
      child: Text("index"),
      color: ColorValues.highlightColor, //Doesn't work.
      color: Colors.Black, // But this works perfectly.
    );
  }

问题原因 #

• 核心问题是Container构造函数中传入了两个同名color参数，Dart语法下同级别同名参数会以最后传入的值为准，因此前面的自定义颜色会被后面的Colors.Black覆盖，无法生效。
• 自定义颜色属性未使用const修饰，热重载场景下全局静态属性的变更不会被实时同步，可能出现显示异常。

解决方案 #

• 删除Container中重复的color参数，仅保留需要使用的自定义颜色配置：

Container currentPage() {
    return Container(
      height: 20.0,
      width: double.infinity,
      child: Text("index"),
      color: ColorValues.highlightColor,
    );
  }

• 优化全局颜色类的写法，所有颜色属性使用const修饰，既符合Flutter常量构造的性能优化要求，也能避免热重载时的状态同步问题：

import 'package:flutter/material.dart';

class ColorValues {
  static const Color highlightColor = Color(0xFF202d35);
  // 其余全局颜色统一在此处定义即可
}

• 如果修改后热重载状态下颜色仍显示异常，直接执行全量重启应用即可，热重载不会同步全局静态常量的修改，重启后即可在任意Widget构建逻辑中正常调用全局定义的颜色。

内容的提问来源于stack exchange，提问作者Muhammad Zeeshan