Using opacity yields wrong scaffold's background color

user_5829191 0
Viewed 646
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.

enter image description here

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.

flutter alpha background-color
2 Answers

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

enter image description here

user_142474620

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( ...
user_68793160
Related