如何添加自定义的颜色颤动？

我想改变颜色的 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),
},
);
}

然后我用它在主要。飞镖作为

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

但行刑后，上面写着

Color 类型不属于 Material Color 子类型

174416 次浏览
小开

primarySwatch is of type MaterialColor and you are passing a value of type Color to it.

You either may try this 

primarySwatch:Theme1.CompanyColors.black,

Or use primaryColor property instead

primaryColor:Theme1.CompanyColors.black[50],
小开

There is a property in Appear called backgroundColor. Use this to set any colour for your Appbar. You don't need to change the theme.

小开

You shouldn't have [50] on the end of here:

primarySwatch:Theme1.CompanyColors.black[50]

Just use the MaterialColor object you created:

primarySwatch:Theme1.CompanyColors.black

I tested this by creating a MaterialColor that's all red, and it worked fine:

Red color

小开

Try This

new Color(0xAARRGGBB)

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

小开

basically flutter uses color AARRGGBB format you can use below color code with any color property like:

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

AA = transparency

RR = red

GG = green

BB = blue

now if you want to create custom color 8-digit code from 6-digit color code then just append transparency (AA) value to it

Transparency percentages Following are some example transparency percentages and their hex values

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

in my case i always use AA = ff because 6-digit color has ff transparency. for 6-digit color best site

小开

You can create a Seprate class.

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

It's a MaterialColor object (not Color) you should assign for a swatch property, providing color values for the ten different luminances.

Many people suggested adjusting the alpha/opacity value of the colors used in the MaterialColor. It's actually a big mistake because it will result in making your element translucent without providing color variety of different shades.

Please consider using this solution for a better approach.

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

I just created a website where you can pick Flutter Colors for your app. You can use that to pick any color you want Flutter Doctor Color Picker

小开

There are several ways to do it, but this is the method I prefer to use. It's dead simple.

Create a custom 

MaterialColor myColor = MaterialColor(0xFF880E4F, color);

Create a map and as you will see below that I modify the opacity channel from 50 through to 900 to give you the various color degrees of opacity. 

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

Same works for Color.fromRGBA if you prefer using Alpha over Opacity.

I would like to point out that I saw you were trying to do this. 

primarySwatch: Colors.black[500]

This will give you the an error. You have to use the base MaterialColor you created. Using the color degree modifiers will make the compiler unhappy.

小开

Try this:

Colors _thisColor = Color(0xFF3366FF);
小开

It's pretty simple.

Get HEX code of your custom color. You can either use a color picker like ColorZilla or google. Note that HEX codes are not case sensitive. I prefer capital.

One example of HEX code would look like #0077CC.

Replace # with 0xFF, so it becomes 0xFF0077CC

Your custom color is ready Color(0xFF0077CC)

小开

I used a simple int parser by selecting appropriate color palette in hex code define it as a string in int-parser with a "0xff" predecessor in place of "#" and got the solution, my actual hex color code was #7CEA9C. It is nothing but as follows

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

add the below part to the section(button,container..) which you want to change the color.

color: Color(0xFFffd57e),
小开

Although shade is a list of integer indexes and color options, it is also a property of your CompanyColors object so you have to reference it differently than a list. And I'm not an expert on flutter and dart but I'm not sure what the Theme1 is for.

//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);
小开

Create a common class like a below code snippet:

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

To use specific color snippet will look like a below:

color: ColorConstants.kPrimaryColor
小开

First create a createMaterialColor.dart file:

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


}

Now, in the .dart file where you want to use custom color, say first.dart, first add this:

import '<path_to>/createMaterialColor.dart';

then, inside the class of stateless widget, initialize the class first like this:

final createMaterialColor = CreateMaterialColor();

Now you can use this function to generate custom color in first.dart like this (for eg if the custom color code is #ffffff):

createMaterialColor.createMaterialColor(Color(0xFFffffff))
小开

If you don't have a deep customization in mind for your MaterialColor and the defaults are just fine then this works out pretty nice and it's simple:

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

Then you can use it as such:

var materialColor = generateMaterialColorFromColor(Colors.red);

or

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

You try:

Convert Hex Color to MaterialColor (Flutter) : http://mcg.mbitson.com/

Details: image

小开 
          color: const Color(0xFFF57F17),
    

    

Container(
decoration: const BoxDecoration(
color: const Color(0xFFF57F17),
borderRadius:
BorderRadius.all(Radius.circular(30)),
),
child: Text(
"Pending",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 13,
color: HexColor(
HexColor.gray_text),
fontFamily:
'montserrat_regular',
decoration:
TextDecoration.none,
),
),
)

提交答案