Flutter: Save and Retrieve Colors from Database or File
( 401 Articles)
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.
// 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; 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:
- 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.