3.7 C
New York
Tuesday, February 7, 2023

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.Advertisements


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


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


  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


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


  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.


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


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:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles