How to manage custom colors?

[shubhamhackz]

As we love Flutter to develop any kind of custom and beautiful UI. Sometimes while developing awesome UI, we have to use custom colors and we end up putting custom const Color(0xFF______)all over the code.

1. No need to manage
2. We should manage Colors somewhere specific like we do in Android
3. Something Else ?

[prasadsunny1]

Yes, there can be a file to store all the colors in a more popular "#hex-value" format. Also, there should be a helper to convert these strings to and from color.

[brianegan]

Very good question! Thanks for raising it. Would be curious how folks manage their colors in their apps.

[stargazing-dino]

Although I don't really like extensions because their discoverability, I recently saw someone create one on ThemeData that housed all their custom colors and I thought it was interesting.

extension MyAppTheme on ThemeData {
  Color get myRed => Color(0xFFB20000);
  /// ...
}

This would probably also encourage users to always look toward their ThemeData for colors already in there rather than to create another random color in place

[sbis04]

I use a very straight forward way of storing and using custom colors.

Create a class called CustomColors:

import 'package:flutter/material.dart';

class CustomColors {
  static const Color muxPink = Color(0xFFff1f78);
  static const Color muxPinkLight = Color(0xFFff709a);
  static const Color muxPinkVeryLight = Color(0xFFfef6f7);
  static const Color muxOrange = Color(0xFFff4b03);
  static const Color muxOrangeLight = Color(0xFFff7d6e);
  static const Color muxGray = Color(0xFF383838);
  static const Color muxGrayLight = Color(0xFFf9f9f9);
}

Then use it like this:

Text(
  'some text',
  style: TextStyle(
    color: CustomColors.muxPink,
  ),
),

I also like the idea suggested by @Nolence