如何为颤振添加自定义颜色？答案

【问题标题】：how to add custom color to flutter?如何为颤振添加自定义颜色？
【发布时间】：2018-11-06 01:17:37
【问题描述】：

我想更改 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'),
    );
  }

但在执行后它说

颜色类型不是 MaterialColor 子类型

【问题讨论】：

参考-stackoverflow.com/questions/46595466/…

标签： flutter dart colors flutter-layout

【解决方案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位颜色best site

【讨论】：

【解决方案2】：

有几种方法可以做到，但this 是我更喜欢使用的方法。这很简单。

创建自定义

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 而不是不透明度，那么 Color.fromRGBA 也同样适用。

我想指出，我看到您正在尝试这样做。

primarySwatch: Colors.black[500]

这会给你一个错误。您必须使用您创建的基础 MaterialColor。使用色度修饰符会使编译器不高兴。

【讨论】：

它很有帮助，但我不确定不透明度是否真的是设计师想要的色调。想象一下将一种颜色放在具有另一种颜色的图层上。混合起来。

【解决方案3】：

它是一个MaterialColor 对象（不是Color），您应该为样本属性分配它，为十种不同的亮度提供颜色值。

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

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

Flutter: Creating a custom color swatch for 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);
}

【讨论】：

【解决方案4】：

您可以创建一个单独的类。

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

【讨论】：

【解决方案5】：

您不应该在此处末尾添加[50]：

primarySwatch:Theme1.CompanyColors.black[50]

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

primarySwatch:Theme1.CompanyColors.black

我通过创建一个全是红色的MaterialColor 对此进行了测试，并且效果很好：

【讨论】：

【解决方案6】：

这很简单。

获取您自定义颜色的HEX 代码。您可以使用 ColorZilla 或 google 之类的颜色选择器。请注意，HEX 代码不区分大小写。我更喜欢资本。

HEX 代码的一个示例类似于#0077CC。

把#替换成0xFF，就变成0xFF0077CC

您的自定义颜色已准备就绪Color(0xFF0077CC)

【讨论】：

【解决方案7】：

primarySwatch 的类型为 MaterialColor，而您将 Color 类型的值传递给它。

你也可以试试这个

primarySwatch:Theme1.CompanyColors.black,

或者改用primaryColor属性

primaryColor:Theme1.CompanyColors.black[50],

【讨论】：

【解决方案8】：

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

【讨论】：

我又看到了这个，不是我再看一遍，帖子已被删除:(
@SamKelham 我相信该帖子仍然存在，因为您正在回复它。如果您有兴趣再次查看该网站。 ------> flutter-color-picker.herokuapp.com
我怎样才能从例如 #ff2200 转到 ARGB 等效项

【解决方案9】：

你试试：

将十六进制颜色转换为 MaterialColor (Flutter) ：http://mcg.mbitson.com/

详情：

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案10】：

如果您没有考虑对 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));

【讨论】：

【解决方案11】：

试试这个：

Colors _thisColor = Color(0xFF3366FF);

【讨论】：

【解决方案12】：

我使用了一个简单的 int 解析器，通过在十六进制代码中选择适当的调色板将其定义为 int-parser 中的字符串，用“0xff”前身代替“#”并得到了解决方案，我实际的十六进制颜色代码是#7CEA9C。无非如下

    color: Color(int.parse("0xff7CEA9C")),

【讨论】：

您也可以使用color: Color(xff7CEA9C)。 0xff7CEA9C 在 dart 中是一个有效的 int 字面量。

【解决方案13】：

将以下部分添加到您要更改颜色的部分（按钮，容器..）。

color: Color(0xFFffd57e),

【讨论】：

【解决方案14】：

创建一个通用类，如下面的代码 sn-p:

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

要使用特定颜色，sn-p 将如下所示：

color: ColorConstants.kPrimaryColor

【讨论】：

【解决方案15】：

Appear 中有一个名为 backgroundColor 的属性。使用它为您的 Appbar 设置任何颜色。您无需更改主题。

【讨论】：

对不起，你不能给AppBar任何颜色。它必须是完全不透明的。

【解决方案16】：

虽然 shade 是整数索引和颜色选项的列表，但它也是 CompanyColors 对象的属性，因此您必须以不同于列表的方式引用它。而且我不是颤振和飞镖方面的专家，但我不确定Theme1 的用途。

//instead of this...    
primarySwatch: Theme1.CompanyColors.black[50]

//do this by accessing the shade property of the Colors.black object
//and drop the theme1 thing...allegedly ;)

primarySwatch: CompanyColors.black.shade(500);

【讨论】：

【解决方案17】：

首先创建一个createMaterialColor.dart文件

createMaterialColor.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CreateMaterialColor{
  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);
  }

}

现在在要使用自定义颜色的 .dart 文件中，比如 first.dart，

先添加这个

import '<path_to>/createMaterialColor.dart';

然后在无状态小部件类中，像这样先初始化类

final createMaterialColor = CreateMaterialColor();

现在你可以像这样使用这个函数在 first.dart 中生成自定义颜色，例如如果自定义颜色代码是#ffffff，

createMaterialColor.createMaterialColor(Color(0xFFffffff))

【讨论】：

【解决方案18】：

试试这个

new Color(0xAARRGGBB)

https://github.com/flutter/engine/blob/master/lib/ui/painting.dart

【讨论】：