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.

[flutter-triage-bot]

This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[flutter-triage-bot]

This issue was assigned to @Hangyujin but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

[dvoloshyn]

For now the simplest workaround for this issue that I saw is to wrap the page widget that is 'pushed' into

ColoredBox(
      color: Theme.of(context).scaffoldBackgroundColor,
      child: child,
)

Any better solutions?

[Piinks]

A PR was filed to address this issue, but it was not completed. If anyone would like to work on this, starting with #139078 and addressing the feedback would be a great place to start.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.