how to add custom color to flutter?
FlutterDartColorsFlutter LayoutFlutter Problem Overview
I want to change the color of AppBar and use a custom color for it, I tried many options but none seem to work. Is there anything I'm missing?
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),
},
);
}
and then I have used it in main.dart as
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'),
);
}
but after execution it says
> type Color is not of subtype MaterialColor
Flutter Solutions
Solution 1 - Flutter
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
Solution 2 - Flutter
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.
Solution 3 - Flutter
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);
}
Solution 4 - Flutter
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);
Solution 5 - Flutter
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:
Solution 6 - Flutter
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)
Solution 7 - Flutter
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],
Solution 8 - Flutter
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
Solution 9 - Flutter
Solution 10 - Flutter
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));
Solution 11 - Flutter
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")),
Solution 12 - Flutter
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
Solution 13 - Flutter
Try this:
Colors _thisColor = Color(0xFF3366FF);
Solution 14 - Flutter
add the below part to the section(button,container..) which you want to change the color.
color: Color(0xFFffd57e),
Solution 15 - Flutter
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.
Solution 16 - Flutter
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);
Solution 17 - Flutter
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))
Solution 18 - Flutter
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,
),
),
)