如何添加自定义颜色来扑腾？

时间：2018-05-27 06:16:10

标签： dart flutter

我想更改appbar的颜色并使用自定义颜色，我尝试了很多选项，但似乎都没有。 有什么东西我不见了吗？

{"status":"fail","success":0,"error":401,"message":"Invalid Token!"}

然后我在main.dart中使用它作为

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),
    },
  );
}

但在执行后它说

  

类型颜色不是子类型MaterialColor

16 个答案:

答案 0 :(得分：10)

基本上颤振使用颜色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

答案 1 :(得分：4)

你不应该在这里结束[50]：

primarySwatch:Theme1.CompanyColors.black[50]

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

primarySwatch:Theme1.CompanyColors.black

我通过创建一个全部为红色的MaterialColor对此进行了测试，并且工作正常：

Red color

答案 2 :(得分：4)

这很简单。

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

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

将#替换为0xFF，使其变为0xFF0077CC

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

答案 3 :(得分：2)

MaterialColor的类型为Color，您将primarySwatch:Theme1.CompanyColors.black, 类型的值传递给它。

你可以试试这个

primaryColor

或者使用primaryColor:Theme1.CompanyColors.black[50], 属性

$str = '2018-02-26 20:30:30';
echo date('Y-m-d', strtotime($str)) . '<br>';

echo strtotime(date('Y-m-d', strtotime($str)));

答案 4 :(得分：1)

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

答案 5 :(得分：1)

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

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

答案 6 :(得分：1)

我使用了一个简单的int解析器，方法是在十六进制代码中选择适当的调色板，然后将其定义为int-parser中的字符串，并以“ 0”代替“＃”，并得到了解决方案， 我实际的十六进制颜色代码是＃7CEA9C。没什么，只是如下

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

答案 7 :(得分：1)

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

color: Color(0xFFffd57e),

答案 8 :(得分：1)

创建一个通用类，如下面的代码片段：

  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

答案 9 :(得分：0)

这是一个MaterialColor对象（而不是Color），您应该为其指定一个色板属性，为十个不同的亮度提供颜色值。请考虑使用此解决方案以获得更好的方法。

Flutter: Creating a custom color swatch for MaterialColor

答案 10 :(得分：0)

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

答案 11 :(得分：0)

有几种方法可以做到这一点，但这是我更喜欢使用的方法。简直太简单了。

创建自定义

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。使用颜色度修饰符会使编译器不满意。

答案 12 :(得分：0)

尽管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);

答案 13 :(得分：0)

使用

primaryColor: Color.fromARGB(255,0,0,0)

Color.fromARGB使您可以为应用程序使用所需的任何颜色。 Flutter Doctor Color Picker

或使用十六进制代码：

primaryColor: Colors(0xFF000000)

（'0x'='＃'和'FF' = 不透明度值）

或

primaryColor: Colors.black[50]

代替

primarySwatch: Colors.black

十六进制不透明度值

  • 100％— FF
  • 95％— F2
  • 90％— E6
  • 85％-D9
  • 80％-CC
  • 75％-高炉
  • 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

（source）

答案 14 :(得分：-1)

尝试一下

new Color(0xAARRGGBB)

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

答案 15 :(得分：-1)

尝试一下：

Colors _thisColor = Color(0xFF3366FF);
相关问题
最新问题