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?

Answer 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);

Answer 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