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

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

但执行后它说

type Color不是子类型MaterialColor

Answer 1

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

创建自定义

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

Answer 2

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

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

Answer 3

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

许多人建议调整MaterialColor. 这实际上是一个很大的错误，因为它会导致您的元素半透明而不提供不同深浅的颜色变化。

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

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

Answer 4

基本上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位彩色的最佳网站

Answer 5

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

primarySwatch:Theme1.CompanyColors.black[50]

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

primarySwatch:Theme1.CompanyColors.black

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

Answer 6

这很简单。

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

一个HEX代码示例如下所示#0077CC。

替换#为0xFF，所以它变成 0xFF0077CC

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

Answer 7

primarySwatch是类型，并且您正在向它MaterialColor传递一个类型的值。Color

你可以尝试这个

primarySwatch:Theme1.CompanyColors.black,

或者使用primaryColor属性代替

primaryColor:Theme1.CompanyColors.black[50],

Answer 8

创建一个公共类，如下面的代码片段：

  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 

Answer 9

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

Answer 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));

Answer 11

你试试：

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

Details: