accent colors?

[kevin-haynie]

Do you think you could add the option for users to choose accent colors also?

[Pyozer]

Hi @kevin-haynie ;)

I'm not sure to understand what you want. You want to add an option to choose the shades of a color ? It's already possible, you can provide a List of ColorSwatch. A ColorSwatch is an Object that contain a primary color and a Map of shade colors.

For example, to create the material color Red:

ColorSwatch color = ColorSwatch(
    0xFFF44336, // Main color
    <int, Color>{
       50: Color(0xFFFFEBEE),
      100: Color(0xFFFFCDD2),
      200: Color(0xFFEF9A9A),
      300: Color(0xFFE57373),
      400: Color(0xFFEF5350),
      500: Color(0xFFF44336), // You must add Main color in shades 
      600: Color(0xFFE53935),
      700: Color(0xFFD32F2F),
      800: Color(0xFFC62828),
      900: Color(0xFFB71C1C),
    },
  )

It is not required to provide the 10 shades, but the MaterialColorPicker use this "structure", so you must use 50, 100, 200, 500.. or/and 900 as key for the Map<int, Colors>. Also the main color must be in key 500 in the shades.

For example, if you can add this property on MaterialColorPicker widget:

colors: [
    ColorSwatch(
        0xFFF44336, // Main color
        <int, Color>{
            50: Color(0xFFFFEBEE),
            100: Color(0xFFFFCDD2),
            500: Color(0xFFF44336), // You must add Main color in shades
            900: Color(0xFFB71C1C),
        },
    ),
]

So if you want to provide custom colors, you can by using the colors property ;)

[kevin-haynie]

Hi Jean-Charles,

Thanks very much for your quick response. Yes, you're right that we can always pass in custom colors. It's not that convenient but it's possible. I guess all I am really saying is that it would be useful I believe to include the accent colors in your base set of colors contained in your 'colors.dart' file. Having these extra colors would benefit everyone since I believe most people would want to have the option to choose accent colors by default? In my case, I really need the accent colors since I am creating color schemes which require an intense contrastt (e.g. yellowAccent background with pure black foreground). See below for an example of a possible mod to your colors.dart file to include the accent colors.

Also, I believe it would be useful if we had pure white and pure black as possible choices by default.

const List materialColors = const [ //Colors.white, //Colors.black, Colors.red, Colors.redAccent, Colors.pink, Colors.pinkAccent, Colors.purple, Colors.purpleAccent, Colors.deepPurple, Colors.deepPurpleAccent, Colors.indigo, Colors.indigoAccent, Colors.blue, Colors.blueAccent, Colors.lightBlue, Colors.lightBlueAccent, Colors.cyan, Colors.cyanAccent, Colors.teal, Colors.tealAccent, Colors.green, Colors.greenAccent, Colors.lightGreen, Colors.lightGreenAccent, Colors.lime, Colors.limeAccent, Colors.yellow, Colors.yellowAccent, Colors.amber, Colors.amberAccent, Colors.orange, Colors.orangeAccent, Colors.deepOrange, Colors.deepOrangeAccent, Colors.brown, Colors.grey, Colors.blueGrey ];

Using the above, we can see more colors:

[image: image.png]

On Tue, Jun 11, 2019 at 5:22 PM Jean-Charles Moussé < notifications@github.com> wrote:

Hi @kevin-haynie https://github.com/kevin-haynie ;)

I'm not sure to understand what you want. You want to add an option to choose the shades of a color ? It's already possible, you can provide a List of ColorSwatch. A ColorSwatch is an Object that contain a primary color and a Map of shade colors.

For example, to create the material color Red:

ColorSwatch color = ColorSwatch( 0xFFF44336, // Main color <int, Color>{ 50: Color(0xFFFFEBEE), 100: Color(0xFFFFCDD2), 200: Color(0xFFEF9A9A), 300: Color(0xFFE57373), 400: Color(0xFFEF5350), 500: Color(0xFFF44336), // You must add Main color in shades 600: Color(0xFFE53935), 700: Color(0xFFD32F2F), 800: Color(0xFFC62828), 900: Color(0xFFB71C1C), }, )

It is not required to provide the 10 shades, but the MaterialColorPicker use this "structure", so you must use 50, 100, 200, 500.. or/and 900 as key for the Map<int, Colors>. Also the main color must be in key 500 in the shades.

For example, if you can add this property on MaterialColorPicker widget:

colors: [ ColorSwatch( 0xFFF44336, // Main color <int, Color>{ 50: Color(0xFFFFEBEE), 100: Color(0xFFFFCDD2), 500: Color(0xFFF44336), // You must add Main color in shades 900: Color(0xFFB71C1C), }, ), ]

So if you want to provide custom colors, you can by using the colors property ;)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Pyozer/flutter_material_color_picker/issues/8?email_source=notifications&email_token=ABAPWQBL2AFWOQU3MOKHJ3DP2AJRDA5CNFSM4HXDITT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXORKDI#issuecomment-501028109, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAPWQAFPI3SZLVEKXENNHDP2AJRDANCNFSM4HXDITTQ .

[Pyozer]

Hi @kevin-haynie Sorry for the very late response I was too busy... :/

I just published 1.0.1 with some new predefined colors. One list of accent colors and another with all material colors (classic colors, accents and black/white).

Is it what you wanted ?

[kevin-haynie]

Thanks very much. I haven't yet had a chance to try your version since I was worked with my modified one until now. I would much rather use the main line version if it does what I want. It sounds like it does - so I will let you know if there are any problems.