'Using opacity yields wrong scaffold's background color

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 1:^[1]

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),
  ...

Solution 2:^[2]

wrap your Scaffold in Container widget and set container color to white.

like this:

return Container(
  color: Colors.white,
  child: Scaffold(
           backgroundColor: Colors.lightGreen.withAlpha(125),
           body: Column( ...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Hadi

'Using opacity yields wrong scaffold's background color

Solution 1:[1]

Use custom PageRouteBuilder, when you navigate to your page.

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Use custom `PageRouteBuilder`, when you navigate to your page.

Solution 2:^[2]