如何在Flutter中添加自定义颜色？

Question

我想改变AppBar的颜色并使用自定义颜色，我尝试了很多选项但似乎都不起作用。我有什么遗漏吗？

import 'package:flutter/material.dart';

final ThemeData CompanyThemeData = new ThemeData(
  brightness: Brightness.light,
  primaryColorBrightness: Brightness.light,
  accentColor: CompanyColors.black[500],
  accentColorBrightness: Brightness.light
);
  
class CompanyColors {
  CompanyColors._(); // this basically makes it so you can instantiate this class
 
 static const _blackPrimaryValue = 0xFF000000;

  static const MaterialColor black = const MaterialColor(
    _blackPrimaryValue,
    const <int, Color>{
      50:  const Color(0xFFe0e0e0),
      100: const Color(0xFFb3b3b3),
      200: const Color(0xFF808080),
      300: const Color(0xFF4d4d4d),
      400: const Color(0xFF262626),
      500: const Color(_blackPrimaryValue),
      600: const Color(0xFF000000),
      700: const Color(0xFF000000),
      800: const Color(0xFF000000),
      900: const Color(0xFF000000),
    },
  );
}

然后我在 main.dart 中使用它，如下：

Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch:Theme1.CompanyColors.black[50],
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }

但执行后显示：

颜色类型不是材料颜色的子类型

- Karishma

---

有没有Flutter的Material Design颜色映射表？ - Jitesh Mohite

Answer 1

基本上，Flutter 使用颜色代码 AARRGGBB 格式，您可以将以下颜色代码与任何颜色属性一起使用，如下所示：

new Container(color: const Color(0xff2980b9));

AA = 透明度

RR = 红色

GG = 绿色

BB = 蓝色

如果你想从6位颜色代码创建自定义8位颜色代码，只需在其后添加透明度（AA）值即可。

透明度百分比 以下是一些示例透明度百分比及其十六进制值

100% - FF
95% - F2
90% - E6
85% - D9
80% - CC
75% - BF
70% - B3
65% - A6
60% - 99
55% - 8C
50% - 80
45% - 73
40% - 66
35% - 59
30% - 4D
25% - 40
20% - 33
15% - 26
10% - 1A
5% - 0D
0% - 00

在我的情况下，我总是使用AA = ff，因为6位颜色代码中ff表示完全不透明。

关于6位颜色代码，可以参考这个最好的网站

- Mohsin AR

Answer 2

你需要为色板属性分配一个MaterialColor对象（而不是Color），提供十种不同亮度的颜色值。

许多人建议调整MaterialColor中使用的颜色的alpha/opacity值。实际上，这是一个大错误，因为它会使您的元素半透明，而没有提供不同阴影的颜色变化。

请考虑使用此解决方案以获得更好的效果。

Flutter：为MaterialColor创建自定义颜色样本

MaterialColor createMaterialColor(Color color) {
  List strengths = <double>[.05];
  final swatch = <int, Color>{};
  final int r = color.red, g = color.green, b = color.blue;

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  strengths.forEach((strength) {
    final double ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  });
  return MaterialColor(color.value, swatch);
}

- Nick Song

Answer 3

有几种方法可以做到这一点，但这个是我喜欢使用的方法。它非常简单。

创建自定义

MaterialColor myColor = MaterialColor(0xFF880E4F, color);

创建一个地图，如下所示，我会修改不透明度通道从50到900，给您不同程度的颜色透明度。

Map<int, Color> color =
{
50:Color.fromRGBO(4,131,184, .1),
100:Color.fromRGBO(4,131,184, .2),
200:Color.fromRGBO(4,131,184, .3),
300:Color.fromRGBO(4,131,184, .4),
400:Color.fromRGBO(4,131,184, .5),
500:Color.fromRGBO(4,131,184, .6),
600:Color.fromRGBO(4,131,184, .7),
700:Color.fromRGBO(4,131,184, .8),
800:Color.fromRGBO(4,131,184, .9),
900:Color.fromRGBO(4,131,184, 1),
};

如果您更喜欢使用Alpha而不是Opacity，Color.fromRGBA同样适用。

我想指出，我看到您试图这样做。

primarySwatch: Colors.black[500]

这会导致错误。您必须使用您创建的基础 MaterialColor。使用颜色程度修饰符将使编译器不高兴。

- Patrick Kelly

---

这很有帮助，但我不确定透明度是否真的是设计师想要在他的颜色阴影中拥有的东西。想象一下将一种颜色放置在另一种颜色的图层上。它们会混合在一起。 - Marwin Lebensky

Answer 4

你可以创建一个独立的类。

static const PrimaryColor =  Color(0xFF808080);
static const PrimaryAssentColor =  Color(0xFF808080);
static const PrimaryDarkColor =  Color(0xFF808080);
static const ErroColor =  Color(0xFF808080);

- SilenceCodder

Answer 5

在这里末尾不应该有[50]：

primarySwatch:Theme1.CompanyColors.black[50]

只需使用您创建的MaterialColor对象即可：

primarySwatch:Theme1.CompanyColors.black

我通过创建一个完全为红色的MaterialColor进行了测试，结果很好：

- Danny Tuppeny

Answer 6

非常简单。

获取你自定义颜色的 HEX 代码。你可以使用像 ColorZilla 或谷歌这样的拾色器。注意，HEX 代码不区分大小写，我更喜欢大写字母。

HEX 代码的一个示例看起来像是 #0077CC。

用 0xFF 替换 #，这样它就变成了 0xFF0077CC。

你的自定义颜色已经准备好了：Color(0xFF0077CC)

- Saahithyan Vigneswaran

---

我已经拥有了我想要的，缺少的是0xFF部分，Android Studio建议使用0x000。 - Ojonugwa Jude Ochalifu

Answer 7

创建一个通用类，例如以下代码片段:

  class ColorConstants {
  static const kPrimaryColor = Color(0xFF394497);
  static const kSecondaryColor = Color(0xFF444FAB);
  static const kThirdSecondaryColor = Color(0xFF5E6BD8);
  static const kGravishBlueColor = Color(0xFF9BA1D2);
  }

使用特定颜色的代码片段如下所示：

color: ColorConstants.kPrimaryColor 

- Kalpesh Khandla

Answer 8

primarySwatch 是 MaterialColor 类型的，而你正在将 Color 类型的值传递给它。

你可以尝试这样做：

primarySwatch:Theme1.CompanyColors.black,

或者使用primaryColor属性代替

primaryColor:Theme1.CompanyColors.black[50],

- Shady Aziza

Answer 9

如果您对您的MaterialColor没有深入的自定义需求，而默认值已经很好，那么这个方法非常简单易用：

static MaterialColor generateMaterialColorFromColor(Color color) {
    return MaterialColor(color.value, {
      50: Color.fromRGBO(color.red, color.green, color.blue, 0.1),
      100: Color.fromRGBO(color.red, color.green, color.blue, 0.2),
      200: Color.fromRGBO(color.red, color.green, color.blue, 0.3),
      300: Color.fromRGBO(color.red, color.green, color.blue, 0.4),
      400: Color.fromRGBO(color.red, color.green, color.blue, 0.5),
      500: Color.fromRGBO(color.red, color.green, color.blue, 0.6),
      600: Color.fromRGBO(color.red, color.green, color.blue, 0.7),
      700: Color.fromRGBO(color.red, color.green, color.blue, 0.8),
      800: Color.fromRGBO(color.red, color.green, color.blue, 0.9),
      900: Color.fromRGBO(color.red, color.green, color.blue, 1.0),
    });
  }

然后你可以像这样使用它：

var materialColor = generateMaterialColorFromColor(Colors.red);

或者

// color format is ARGB
var materialColor = generateMaterialColorFromColor(Color(0xFFFF0000));

- Dan

Answer 10

我刚刚创建了一个网站，可以为您的应用程序选择Flutter颜色。您可以使用它来选择任何您想要的颜色Flutter Doctor Color Picker。

- eyoeldefare

---

我之前看过这个帖子，现在再来看却发现已经被删除了 :( - Sam Kelham

@SamKelham 我相信这篇帖子仍然存在，因为你正在回复它。如果你想再次查看该网站，请访问 ------> https://flutter-color-picker.herokuapp.com/ - eyoeldefare

请问如何将例如 #ff2200 转换为 ARGB 等效值？ - user3808307