在Flatter中使用十六进制颜色更改原色

Question

我想改变我的应用程序中的原色，所以我尝试：

theme: ThemeData(
        primaryColor: const Color(0xFF784CEF),
),

但这不起作用，所以我检查了文档，找到了另一种方法，即使用

dart prettyprint-override">colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.red,
    // but I want 0xFF784CEF as my primary color so I tried
    // primarySwatch: Color(0xFF784CEF), 
    // which gives me an error saying `The argument type 'Color' can't be assigned to the parameter type 'MaterialColor'.`
),

所以我的问题是：如何用十六进制颜色改变原色

Answer 1

多亏了“https://stackoverflow.com/questions/50081213/how-do-i-use-hexadecimal-color-strings-in-flutter/50081214#50081214"

在flatter中，Color类只接受整数作为参数，或者可以使用指定的构造函数fromARGB和fromRGBO。

因此，我们只需要将字符串#b74093转换为整数值。此外，我们需要尊重不透明性始终需要指定
255（完整）不透明度由十六进制值FF表示。这已经给我们留下了0xFF。N

块引用

哦，我们只需要像这样追加我们的颜色字符串：

const color = const Color(0xffb74093); // Second `const` is optional in assignments.

这些字母可以选择大写或不大写：

const color = const Color(0xFFB74093);

如果要使用不透明度百分比值，可以使用此表中的值替换第一个FF（也适用于其他颜色通道）。

从Dart2.6.0开始，您可以为Color类创建扩展，该类允许您使用十六进制颜色字符串创建颜色对象：

extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

fromHex方法也可以在mixin或class中声明，因为HexColor名称需要显式指定才能使用，但是扩展对toHex方法很有用，可以隐式使用。下面是一个例子：

void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

这里的许多其他答案展示了如何从十六进制字符串动态创建Color，就像我上面所做的那样。然而，这样做意味着颜色不能是const。理想情况下，您可以按照我在答案第一部分中解释的方式分配颜色，这在大量实例化颜色时更有效，这通常是Flutter小部件的情况。

Answer 2

关于MaterialApp主题

theme: Theme.of(context).copyWith(
  colorScheme: Theme.of(context).colorScheme.copyWith(
        primary: const Color(0xFF784CEF),
      ),
),