There are situations you may need to store color in a database, file, cloud, or shared preferences. There is a small challenge is that color is not a string or a number so we cannot directly save it. This article will show you a few ways to get that task done.
Using Color’s Value
The solution here is to save the color’s value which is an integer.
Saving:
// Colors to integers
// Colors from Material design's color palette
final Color color1 = Colors.amber;
final int value1 = color1.value;
print(value1); // 4294951175
// 0xFF, ARGB, and RGBO colors
final Color color2 = Color(0xFF42A5F5);
final int value2 = color2.value;
print(value2); // 4282557941
final Color color3 = Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
final int value3 = color3.value;
print(value3); // 4282557941
final Color color4 = Color.fromARGB(255, 46, 15, 245);
final int value4 = color4.value;
print(value4); // 4281208821
final Color color5 = Color.fromRGBO(66, 169, 145, 0.8);
final value5 = color5.value;
print(value5); // 3426920849
// now you can save value1, value2, value3, value4, value5 as normal intergersRetrieving:
// Fetch your color values from your storage then create Color from them
final Color color1 = Color(4284790262).withOpacity(1);
final Color color2 = Color(4294951175).withOpacity(1);
// Now you can use color1 and color2 to style your widgetsUsing 4 properties: alpha, red, green, and blue
Saving:
final Color color1 = Colors.purple;
final int alpha1 = color1.alpha;
print(alpha1); // 255
final int red1 = color1.red;
print(red1); // 156
final int green1 = color1.green;
print(green1); // 39
final int blue1 = color1.blue;
print(blue1); // 176
final Color color2 = Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
final int alpha2 = color2.alpha;
print(alpha2); // 255
final int red2 = color2.red;
print(red2); // 66
final int green2 = color2.green;
print(green2); // 165
final int blue2 = color2.blue;
print(blue2); // 245
// Now you can save the alpha, red, green, blue valuesRetrieving:
// Read alpha, red, green, and blue from your database, API, file, etc.
// Then:
final Color color = Color.fromARGB(255, 156, 39, 176);
// Use this color for your widgetsUsing 4 properties: red, green, blue, and opacity
This approach is similar to the previous one.
Saving:
final Color myColor = Colors.deepPurple[200];
final red = myColor.red;
print(red); // 179
final green = myColor.green;
print(green); // 157
final blue = myColor.blue;
print(blue); // 219
final opacity = myColor.opacity;
print(opacity); // 1.0
// Save red, green, blue, and opacity database, file, etc.Retrieving:
// Read red, green, blue, and opacity from your file, database, or API
// Then:
final Color myColor = Color.fromRGBO(179, 157, 219, 1.0);
// Now you can use this color for your widgetsConclusion
We’ve walked through a few examples of how to persist a colo to long-term storage. One of the most common scenarios you may come across is to store personalized background and font color settings for each user. Another case is a shop app that sells cars or clothing and allows its customers to choose colors when making orders.
If you’d like to learn more new and interesting stuff in Flutter, take a look at the following articles:
- Flutter: Make a simple Color Picker from scratch
- Flutter ColorFiltered Examples
- Flutter ColoredBox Examples
- Flutter & Hive Database: CRUD Example
- Ways to Store Data Offline in Flutter
- Most Popular Packages for State Management in Flutter
You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.
