CODEWITHSUNDEEP
flutterdartcolorsflutter-layout
Karishma
Karishma

Reputation: 1231

how to add custom color to flutter?

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

Upvotes: 122

Views: 214285

Answers (19)

Firenze
Firenze

Reputation: 367

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

Upvotes: 2

sarjeet singh
sarjeet singh

Reputation: 541

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

Upvotes: 1

Đức Vĩnh L&#234;
Đức Vĩnh L&#234;

Reputation: 61

You try:

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

Details: image

Upvotes: 6

Dan
Dan

Reputation: 2536

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

Upvotes: 4

Christopher Ransom
Christopher Ransom

Reputation: 2058

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

Upvotes: 39

Kalpesh Khandla
Kalpesh Khandla

Reputation: 736

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

Upvotes: 5

Laurence
Laurence

Reputation: 409

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

Upvotes: 0

Gayan Chinthaka
Gayan Chinthaka

Reputation: 569

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

color: Color(0xFFffd57e),

Upvotes: 1

A.K.J.94
A.K.J.94

Reputation: 552

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

Upvotes: 2

eyoeldefare
eyoeldefare

Reputation: 2303

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

Upvotes: 5

Saahithyan Vigneswaran
Saahithyan Vigneswaran

Reputation: 7143

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)

Upvotes: 19

Patrick Kelly
Patrick Kelly

Reputation: 1009

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.

Upvotes: 33

Junel Alto
Junel Alto

Reputation: 21

Try this:

Colors _thisColor = Color(0xFF3366FF);

Upvotes: 1

SilenceCodder
SilenceCodder

Reputation: 3164

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

Upvotes: 28

Mohsin AR
Mohsin AR

Reputation: 3108

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

Upvotes: 105

NEM
NEM

Reputation: 13

Try This

new Color(0xAARRGGBB)

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

Upvotes: -2

Danny Tuppeny
Danny Tuppeny

Reputation: 42333

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

Upvotes: 23

Vinoth Kumar
Vinoth Kumar

Reputation: 13431

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.

Upvotes: 0

Shady Aziza
Shady Aziza

Reputation: 53317

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

Upvotes: 6

Related Questions