Dark mode colors for Flutter

Question

In the site material.io it is written that:

To create branded dark surfaces, overlay the primary brand color at a low opacity over the recommended dark theme surface color (#121212). The color #1F1B24 is the result of combining the dark theme surface color #121212 and the 8% Primary color.

My questions are:

1. How can I calculate 8% of my color?
2. How to implement this overlay thing in Flutter?

Solution 1

A solution for the overlay without using widgets is to use Color.alphaBlend which

combine[s] the foreground color as a transparent color over top of a background color, and return[s] the resulting combined color.

You use it like this:

Color newColor = Color.alphaBlend(foregroundColor, backgroundColor);

Solution 2

1.8% of a color is the color but with 8% Opacity. This can be achieved by using the Opacity widget or by using the withOpacity method of the Colors class.

2.

An overlay is a semi-transparent covering on an element, indicating state. Overlays provide a systematic approach to visualizing states using opacity.

To give an Overlay in Flutter use the Overlay Widget.

example in flutter-using-overlay-to-display-floating-widgets

Solution 3

1. Color.fromRGBO(r, g, b, opacity) Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) in your case you might have opacity as 0.08 to simulate 8% opacity, so the code for you is Color.fromRGBO(31, 26, 36, 0.08)

2. The overlay can be implemented using a Stack() widget that is a positional widget that works very similar to Colum or Row, but Stack put each widget on top of another widget