No close button when using Navigator in full-screen dialog route

[tp]

Steps to Reproduce

I want to use a navigator in a modal route, but when I do it like in the minimal example code below, there is no close button shown on the app bar:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(),
        body: Builder(
          builder: (context) {
            return SafeArea(
              child: Column(
                children: <Widget>[
                  InkWell(
                    onTap: () => _pushModalWidget(context),
                    child: Text('Modal widget'),
                  ),
                  InkWell(
                    onTap: () => _pushModalNavigator(context),
                    child: Text('Modal navigator'),
                  ),
                ],
                crossAxisAlignment: CrossAxisAlignment.center,
              ),
            );
          },
        ),
      ),
    );
  }

  void _pushModalWidget(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (context) => Scaffold(
              appBar: AppBar(),
              body: Text('Modal widget'),
            ),
      ),
    );
  }

  void _pushModalNavigator(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (context) => Navigator(
              onGenerateRoute: (routeSettings) {
                return MaterialPageRoute(
                  fullscreenDialog: true,
                  builder: (context) {
                    return Scaffold(
                      appBar: AppBar(),
                      body: Text('Modal navigator'),
                    );
                  },
                );
              },
            ),
      ),
    );
  }
}

Analyzing flutter_playground...                                         
No issues found! (ran in 1.8s)

flutter doctor -v
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale en-DE)
    • Flutter version 1.5.4-hotfix.2 at /Users/timm-l1-ay/Downloads/flutter
    • Framework revision 7a4c33425d (3 weeks ago), 2019-04-29 11:05:24 -0700
    • Engine revision 52c7a1e849
    • Dart version 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.


[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.2.1, Build version 10E1001
    • ios-deploy 1.9.4
    • CocoaPods version 1.6.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[!] IntelliJ IDEA Ultimate Edition (version 2018.2.6)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.0.2

[✓] Connected device (1 available)
    • iPhone Xs • 44C9099F-E7CD-42A7-A76D-4AFFE8100B39 • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-12-2 (simulator)

! Doctor found issues in 3 categories.

[HansMuller]

Haven't had a chance to look at this carefully however it looks like Scaffold whose app bar isn't showing a back button because there's no route to pop. In this case you don't want the Scaffold's Navigator to pop its route, but the enclosing Navigator to do so. Maybe add a BackButton to the AppBar that DTRT.

[tp]

@HansMuller You're right. I didn't think of the fact, that the Scaffold brings its own Navigator.

I changed the _pushModalNavigator to render a close button in the app bar, but for some reason I don't understand yet, the pop() triggers by the close button seems to dismiss all pages, resulting in a black screen:

  void _pushModalNavigator(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        fullscreenDialog: true,
        builder: (context) => Navigator(
              onGenerateRoute: (routeSettings) {
                return MaterialPageRoute(
                  fullscreenDialog: true,
                  builder: (context) {
                    return Scaffold(
                      appBar: AppBar(
                        leading: InkWell(
                          child: Icon(Icons.close),
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ),
                      body: InkWell(
                        child: Text('Modal navigator'),
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => Scaffold(
                                    appBar: AppBar(),
                                    body: Text('Modal navigator page 2'),
                                  ),
                            ),
                          );
                        },
                      ),
                    );
                  },
                );
              },
            ),
      ),
    );
  }

Not sure what is going in here, as the same Navigator.of(context) usage works just fine when pushing a second page in the modal dialog.

[jthlim]

Your

Navigator.of(context).pop();

Is getting the Navigator starting on this line:

builder: (context) => Navigator(

One way to fix this is to change line 9 to:

builder: (context2) {

[TahaTesser]

Hi @tp
Looks you managed to have a workaround for this
Do you think this issue still valid?
Thank you

[TahaTesser]

Without additional information we are unfortunately not sure how to resolve this issue.
We are therefore reluctantly going to close this bug for now.
Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
Thanks for your contribution.

[leeprobert]

Use the root navigator to push a fullscreenDialog page and then pop from it too:
Navigator.of(context, rootNavigator: true)..pop();

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