Flutter why is Navigator changing colour of Scaffold beneath transparent Widget

Question

Q) Why in this DartPad is the transparent page not showing solid blue like the BottomNavigationBar, which is also transparent?

Edit: This is just to illustrate the problem that is occurring on my iOS device + simulator.

Edit2: This was working fine in Flutter V2, now not so much in Flutter V3!

Explanation:

I've got a persistent BottomNavigationBar and I'm wrapping each tab's page with its own 'Navigator', so I can have individual page stacks. That's all fine.

However, in this example, I want my pages to be transparent and show the colour behind, which is wrapping the whole screen.

To demonstrate:

If you go to line 156 - you can toggle between: return _page!; and return Visibility(...

Screenshot bad:

Screenshot good:

score 0 · Answer 1 · answered Jun 09 '22 at 16:29

0

Seems to be like a problem with dartpad renderer. I ran your code in Android studio and both returned the same UI. Adding images for your reference

answered Jun 09 '22 at 16:29

Kaushik Chandru

15,510
2
12
30

It's not the dartpad renderer as I have the same issue on iOS devices. I just used dartpad to show the code running. I suspect you're on V2+ flutter, not V3? – Dave Jun 09 '22 at 17:06
Yeah I am on V2. You are right. I used an iOS simulator to check it. Try building it on another device please. – Kaushik Chandru Jun 09 '22 at 17:07
Same on Android device (pixel 4a Android 12) – Dave Jun 09 '22 at 17:22
Instead of CupertinoPageRoute if you add MaterialPageRoute it give the same result. – Kaushik Chandru Jun 09 '22 at 17:35
Yep - same thing. – Dave Jun 09 '22 at 17:55

score 0 · Accepted Answer · answered Jun 10 '22 at 13:16

0

This is a regression bug from v2 to v3. Github issue here:

https://github.com/flutter/flutter/issues/105738

answered Jun 10 '22 at 13:16

Dave

5,283
7
44
66

Flutter why is Navigator changing colour of Scaffold beneath transparent Widget

2 Answers2