Using opacity yields wrong scaffold's background color

Question

main() => runApp(
      MaterialApp(
        home: CountryScreen(),
      ),
    );

and in the CountryScreen build's widget method

return Scaffold(
  backgroundColor: Colors.lightGreen.withAlpha(125),
  body: Column( ...

Scasffold's background color is below and obviously it's a wrong color because Colors.lightGreen.withAlpha(125) mixes with black.

How to awoid such behaviour when using alpha or opacity with a color?

For instance, if I use a solid color Colors.lightGreen for the scaffold backgroud it doesn't mix up with a black and it is ok.

Solution

Use custom PageRouteBuilder, when you navigate to your page.

Like:

Widget opaquePage(Widget page) => PageRouteBuilder(
   opaque: false,
   pageBuilder: (BuildContext context, _, __) => page,
);

Now navigate to your page:

Navigator.push(
  context,
  opaquePage(MyScaffoldWidget),
)

Then you should be able to make your Scaffold's background transparent:

Scaffold(
  backgroundColor: Colors.purple.withOpacity(.85),
  ...

Comments

[tomerpacific]

Can you share what your desired result looks like?

[pskink]

you would like to have translucent main window and see other apps that are behind (for example for flutter desktop app)?

[rozerro]

@tomerpacific the desired resulted color for the scaffold backgroung should be a color if apply opacity 0.5 to Colors.lightGreen

[rozerro]

@pskink not at all. the main window backgroud color should be comletely opaque with a color Colors.lightGreen.withAlpha(125)

[pskink]

if you use non opaque colors the visual appearance depends on what color is behind: for example what is color Colors.red.withAlpha(0)?

[pskink]

if you use non opaque colors the visual appearance depends on what color is behind: for example what is color Colors.red.withAlpha(0)?

[rozerro]

@pskink it gives black backround because withAlpha(0) makes a color comletele transparent.

[pskink]

the same is with 127 if background color (behind) is white the result is different from black, if you want to see it in action try Color.alphaBlend(Colors.lightGreen.withAlpha(125), Colors.red) and Color.alphaBlend(Colors.lightGreen.withAlpha(125), Colors.white)

[rozerro]

@pskink using withAlpha(125) is like a desatutating a color and make it twice lighter compared to original color, right? but in the topic example it mixes up with black color

[pskink]

no, it will not be desaturated (as i said it will depend on what color is behind): if you want to desaturate use HSVColor and its saturation property (ranges from 0..1)

[rozerro]

@pskink using alphaBlend seems give a desired result but I think there shold be another solution in a such case

[pskink]

it is HSVColor - S stands for saturation

[rozerro]

@pskink wraping the column in a container with a color of Colors.lightGreen.withAlpha(125) and not using scaffold bacground color is sipmler

[pskink]

additional Column and Container just to specify the color? if you dont like Color.alphaBlend or HSVColor just use Colors.lightGreen.shade400 or Colors.lightGreen.shade300 or similar shades (shade500 is the same as Colors.lightGreen)

[rozerro]

@pskink it's one more solution