how to add custom color to flutter?

Question

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

refer- https://stackoverflow.com/questions/46595466/is-there-a-map-of-material-design-colors-for-flutter/56279034#56279034 — Jitesh Mohite, May 23 '19 at 15:59

score 102 · Answer 1 · answered Dec 20 '18 at 20:43

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

score 39 · Answer 2 · edited May 19 '21 at 12:29

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

score 33 · Answer 3 · edited Nov 11 '19 at 04:02

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.

Its helpful, but i'm not sure if opacity is really something a designer wants in his color shades. Imagine placing one color on a layer with another color. It gets mixed. — Marwin Lebensky, Oct 14 '21 at 07:53

score 27 · Answer 4 · answered Apr 17 '19 at 09:31

27

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

answered Apr 17 '19 at 09:31

SilenceCodder

2,874
24
28

score 22 · Answer 5 · answered May 27 '18 at 08:25

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:

score 17 · Answer 6 · answered Apr 05 '20 at 06:13

17

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)

answered Apr 05 '20 at 06:13

Saahithyan Vigneswaran

6,841
3
35
45

I already had what I wanted, what was missing was the `0xFF` part, android studio was suggesting `0x000` – Ojonugwa Jude Ochalifu May 07 '23 at 19:10

score 6 · Answer 7 · answered May 27 '18 at 06:36

6

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],

answered May 27 '18 at 06:36

Shady Aziza

50,824
20
115
113

score 6 · Answer 8 · answered May 01 '21 at 17:09

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

eyoeldefare · Answer 9 · 2020-07-22T14:31:15.853

5

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

edited Jul 22 '20 at 14:31

answered Jun 11 '19 at 18:34

eyoeldefare

2,136
1
15
25

I saw this a while aga, not I come to look at it again and the post has been removed :( – Sam Kelham Jul 03 '19 at 02:36
1

@SamKelham I believe the post is still here since you're replying to it. If you're interested to see the website again. ------> https://flutter-color-picker.herokuapp.com/ – eyoeldefare Jul 10 '19 at 03:34
How can I go from for example #ff2200 to the ARGB equivalent please – user3808307 Oct 07 '20 at 19:49

score 5 · Answer 10 · answered Sep 07 '21 at 23:53

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

score 5 · Answer 11 · edited Oct 05 '21 at 18:53

5

You try:

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

Details:

edited Oct 05 '21 at 18:53

4b0

21,981
30
95
142

answered Sep 29 '21 at 15:40

Đức Vĩnh Lê

51
1
1

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 29 '21 at 17:07

score 2 · Answer 12 · answered Aug 29 '20 at 05:48

2

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")),

answered Aug 29 '20 at 05:48

A.K.J.94

492
6
14

You can also use `color: Color(xff7CEA9C)`. `0xff7CEA9C` is a valid int literal in dart. – Peter Bruins Mar 08 '21 at 12:47

score 2 · Answer 13 · edited Jun 02 '22 at 03:21

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

Thanks a lot, you made my day; not only a customized solution but also a dynamic one. — quantme, Jun 02 '22 at 03:11

score 1 · Answer 14 · edited Jul 20 '19 at 05:13

1

Try this:

Colors _thisColor = Color(0xFF3366FF);

edited Jul 20 '19 at 05:13

Adrita Sharma

21,581
10
69
79

answered Jul 20 '19 at 04:25

Junel Alto

21
1

score 1 · Answer 15 · answered Oct 03 '20 at 11:31

1

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

color: Color(0xFFffd57e),

answered Oct 03 '20 at 11:31

Gayan Chinthaka

521
6
5

score 0 · Answer 16 · answered May 27 '18 at 06:58

0

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.

answered May 27 '18 at 06:58

Vinoth Kumar

12,637
5
32
38

Sorry you can't give any color to `AppBar`. It has to be completely opaque. – CopsOnRoad Sep 04 '18 at 16:10

Laurence · Answer 17 · 2020-11-17T07:09:28.430

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

score 0 · Answer 18 · answered Apr 12 '22 at 06:31

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

score -2 · Answer 19 · answered Jun 27 '18 at 17:54

-2

Try This

new Color(0xAARRGGBB)

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

answered Jun 27 '18 at 17:54

NEM

13
1
2

how to add custom color to flutter?

19 Answers19