MaterialPageRoute barrierColor is black when pushing new routes

[AhmedLSayed9]

Steps to Reproduce

1. Execute flutter run on the code sample
2. Click Go To ScreenB button
3. Observe the black barrierColor as the page is transitioning

Expected results:
The barrierColor when navigating is expected to be transparent.

Actual results:
The barrierColor when navigating is black. It might not be very obvious in full screens navigation, but when using nested navigation like this sample video, it becomes more noticeable.

Screen.Recording.2022-11-25.at.3.09.11.AM.mov

Code sample

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: ScreenA(),
    );
  }
}

class ScreenA extends StatelessWidget {
  const ScreenA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (ctx) => const ScreenB(),
                  ),
                );
              },
              child: const Text('Go to ScreenB'),
            ),
          ],
        ),
      ),
    );
  }
}

class ScreenB extends StatelessWidget {
  const ScreenB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Back to ScreenA'),
            ),
          ],
        ),
      ),
    );
  }
}

Logs

Analyzing testapp...                                                    
No issues found! (ran in 2.5s)

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.4 21F79 darwin-arm, locale en-EG)
    • Flutter version 3.3.9 on channel stable at /Users/bx777/development/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (2 days ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/bx777/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F100
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 13 (API 33) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 107.0.5304.121

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[exaby73]

Hello @AhmedLSayed9. What you see a black isn't really black all the time. It's the end of the transition you are looking at. If you slow down the animation, which you can do by setting timeDilation = 5 for example, you can see the fade to black transition:

Code Sample

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  timeDilation = 5;
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: ScreenA(),
    );
  }
}

class ScreenA extends StatelessWidget {
  const ScreenA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (ctx) => const ScreenB(),
                  ),
                );
              },
              child: const Text('Go to ScreenB'),
            ),
          ],
        ),
      ),
    );
  }
}

class ScreenB extends StatelessWidget {
  const ScreenB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('Back to ScreenA'),
            ),
          ],
        ),
      ),
    );
  }
}

Video

simplescreenrecorder-2022-11-25_14.48.39.mp4

This looks like it's working as expected. If you want a different transition, you can always use Flutter's animation APIs along with the Navigator APIs to define a custom transition.

Since this is not a issue with Flutter, I am closing the issue. If you disagree with my decision, please comment and I can reopen it. Thank you.

[AhmedLSayed9]

Hello @exaby73,

I understand that this can be solved using custom transition but I'd like to use the default animation as It's been used in various of my projects.

I see that the transition is fade to black not a direct black color but it still doesn't look proper imo.

Also, This behavior was not the default before. This is the behavior using your sample code with Flutter v2.10.5:

Video

Screen.Recording.2022-11-25.at.2.03.02.PM.mov

Starting from Flutter v3.0.0 the fade to black is appeared. I don't know if the change to it was intended or not but I think it's not a proper user experience anyway.

[exaby73]

The transition you are referring to is based on older versions of android. Flutter has updated it's default transition on android to match current versions of android. This is expected behavior

[AhmedLSayed9]

I see. Thanks

[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.