MaterialPageRoute barrierColor is black when pushing new routes

This issue has been tracked since 2022-11-25.

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 wrote this answer on 2022-11-25

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 wrote this answer on 2022-11-25

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 wrote this answer on 2022-11-25

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 wrote this answer on 2022-11-25

I see. Thanks

More Details About Repo
Owner Name flutter
Repo Name flutter
Full Name flutter/flutter
Language Dart
Created Date 2015-03-06
Updated Date 2022-12-07
Star Count 147031
Watcher Count 3560
Fork Count 23915
Issue Count 11300

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date