如何在flutter中创建一组共享的自定义颜色名称？

Question

我正在使用 Flutter 3.22，多年来我第一次开始创建我的个人可重用小部件和实用程序库。
一切都很顺利，除了一件事我不知道如何做。
基本上我想做的是创建一组自定义的颜色名称，我可以在库和最终应用程序周围的小部件中调用它们。比如：

Container(
   color: Theme.of(context).myCustomColorName
)

这是通过在周围某处定义

myCustomColorName

来实现的（不知道在哪里！）。我不知道如何做到这一点，因为我发现我可以在每个应用程序的

main.dart

中执行此操作

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      ...
    ),
  )
)

但是属性是固定的，我无法真正定义我的自定义颜色。
到目前为止，我一直使用具有静态属性的类来定义颜色，例如

class AppColors {
  static const Color primaryColor = Color(0xFF3DB4F5);
  ...
}

但这不是“可移植的”，因为它不是可以复制的东西。

我被困住了，有什么建议吗？

Answer 1

主要是，您可以通过为

ThemeData

创建自定义扩展并在您的应用程序中使用它来实现它。

创建扩展示例：

extension CustomAppThemeData on ThemeData {
  Color get customPrimaryColor => const Color(0xFF3DB4F5);
}

接下来，确保应用程序中有一个应用的主题。例如，为应用程序主小部件中使用的

theme

设置

MaterialApp

：

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      theme: ThemeData(),
    );
  }
}

由于

CustomAppThemeData

是

ThemeData

的扩展，您可以将

primaryColor

作为

Theme.of(context).primaryColor

访问（因为您的主应用程序小部件有一个主题）。示例：

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Colors Example'),
      ),
      body: Center(
        child: Container(
          height: 100,
          width: 100,
          // Here
          color: Theme.of(context).customPrimaryColor,
        ),
      ),
    );
  }
}

---

💡提示：

如果您将扩展中声明的颜色名称保留为

primaryColor

，您可能会得到不同的颜色！

ThemeData

有一个名为

primaryColor

的属性，它将是可访问的而不是您的自定义颜色。

因此，您可以做的是更改自定义颜色的名称（例如代码示例

customPrimaryColor

中提到的），或者考虑

primaryColor

的默认

ThemeData

：

ThemeData(primaryColor: const Color(0xFF3DB4F5)),

因此无需声明自定义颜色。