Flutter: Save and Retrieve Colors from Database or File

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 intergers

Retrieving:

  // 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 widgets

Using 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 values

Retrieving:

  // 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 widgets

Using 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 widgets

Conclusion

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.