Android zoom page transition display scrim in an odd position when there are nested navigators.

[jonahwilliams]

Run on Android and tab between PageOne and PageTwo, notice the scrim darkens the screen in an unexpected manner. b/260364434

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: MainPage(),
 );
 }
}

class MainPage extends StatelessWidget {
 final navigatorKey = GlobalKey<NavigatorState>();

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Column(
 children: <Widget>[
 Expanded(
 child: Navigator(
 key: navigatorKey,
 onGenerateRoute: (route) => MaterialPageRoute(
 settings: route,
 builder: (context) => PageOne(),
 ),
 ),
 ),
 BottomNavigationBar(navigatorKey)
 ],
 ),
 );
 }
}

class BottomNavigationBar extends StatelessWidget {
 final GlobalKey<NavigatorState> navigatorKey;

 BottomNavigationBar(this.navigatorKey) : assert(navigatorKey != null);

 Future<void> push(Route route) {
 return navigatorKey.currentState!.push(route);
 }

 @override
 Widget build(BuildContext context) {
 return Container(
 color: Colors.blue,
 child: ButtonBar(
 alignment: MainAxisAlignment.spaceEvenly,
 children: <Widget>[
 TextButton(
 child: Text("PageOne", style: TextStyle(color: Colors.red)),
 onPressed: () {
 push(MaterialPageRoute(builder: (context) => PageOne()));
 },
 ),
 TextButton(
 child: Text("PageTwo", style: TextStyle(color: Colors.red)),
 onPressed: () {
 push(MaterialPageRoute(builder: (context) => PageTwo()));
 },
 )
 ],
 ),
 );
 }
}

class PageOne extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Text("Page One"),
 TextButton(
 onPressed: (){
 Navigator.of(context).pop();
 },
 child: Text("Pop"),
 ),
 ],
 ),
 );
 }
}

class PageTwo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Text("Page Two"),
 TextButton(
 onPressed: (){
 Navigator.of(context).pop();
 },
 child: Text("Pop"),
 ),
 ],
 ),
 );
 }
}

[chunhtai]

cc @Hangyujin may be a good one to looking into navigator and animation.

[jonahwilliams]

maybe a simple fix would be to detect if the last route is being pop'd and elide the scrim in that case

[Time1ess]

@jonahwilliams could you elaborate more on this issue? I tried to build and run the demo app, but didn't observe something weird to me, am I missing something?

[bleroux]

Running the given code sample the grey scrim is fully visible when pushing a new Route, is it the issue reported here?

Enregistrement.de.l.ecran.2022-12-01.a.15.42.12.mov

It seems to happen because the pages content (PageOne or PageTwo) have a transparent background.

Here is a screen recording with a green background for PageOne and timeDilation = 30:

Enregistrement.de.l.ecran.2022-12-01.a.16.12.35.mov

It seems to work as intended, am I missing something?

[rubenferreira97]

I am also hitting this issue in #126682. This bug seems to happen in any transition builder passed into pageTransitionsTheme:

• FadeUpwardsPageTransitionsBuilder
• OpenUpwardsPageTransitionsBuilder
• ZoomPageTransitionsBuilder
• CupertinoPageTransitionsBuilder

It's very annoying on Android because it causes the status bar to re-render in white and black (check video #126682), greatly affecting the fidelity and making any Flutter app feel non-native and unprofessional.

[auradigitaldev]

Any updates? It's a bit inconvenient that this common workflow makes default transitions bug out.