Home > OS >  Black screen when calling Navigator.popUntil()
Black screen when calling Navigator.popUntil()

Time:10-03

I am making a Flutter app where I navigate from the home screen to other pages. I then want to go back to the home screen by popping the Navigator stack. When I do this I get a black screen and I assume I pop until the stack is empty. I do not however understand where my mistake is.

In page2.dart, if I replace the Navigator.popUntil() call with two calls to Navigator.pop(context) after each other, it pops successfully back to the home screen.

To demonstrate the issue I have I made a stand alone application that has this behavior.

main.dart

import 'package:flutter/cupertino.dart';
import 'package:test/router.dart' as router;
import 'package:flutter/widgets.dart';

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
        title: 'Test',
        initialRoute: router.home,
        onGenerateRoute: router.generateRoute);
  }
}

router.dart

import 'package:flutter/cupertino.dart';
import 'package:test/home.dart';
import 'package:test/page1.dart';
import 'package:test/page2.dart';
import 'package:flutter/widgets.dart';

const home = '/';
const page1 = '/page1';
const page2 = '/page2';

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case home:
      return CupertinoPageRoute(builder: (context) => const Home());
    case page1:
      return CupertinoPageRoute(builder: (context) => const Page1());
    case page2:
      return CupertinoPageRoute(builder: (context) => const Page2());
    default:
      print('Undefined view');
      return CupertinoPageRoute(
          builder: (context) => UndefinedView(
                name: settings.name ?? 'No Name',
              ));
  }
}

class UndefinedView extends StatelessWidget {
  final String name;
  const UndefinedView({Key? key, required this.name}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Text('Route for $name is not defined'),
      ),
    );
  }
}

home.dart

import 'package:flutter/cupertino.dart';
import 'package:test/router.dart' as router;
import 'package:flutter/widgets.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        CupertinoButton(
          child: const Text(
            'Go to page 1',
            style: TextStyle(color: Color.fromRGBO(0xFF, 0xFF, 0xFF, 1)),
          ),
          onPressed: () => {Navigator.pushNamed(context, router.page1)},
        ),
        Container(
          height: 50,
        )
      ],
    ));
  }
}

page1.dart

import 'package:flutter/cupertino.dart';
import 'package:test/router.dart' as router;
import 'package:flutter/widgets.dart';

class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        CupertinoButton(
          child: const Text(
            'Go to Page 2',
            style: TextStyle(color: Color.fromRGBO(0xFF, 0xFF, 0xFF, 1)),
          ),
          onPressed: () => {Navigator.pushNamed(context, router.page2)},
        ),
        Container(
          height: 50,
        )
      ],
    ));
  }
}

page2.dart

import 'package:flutter/cupertino.dart';
import 'package:test/router.dart' as router;
import 'package:flutter/widgets.dart';

class Page2 extends StatefulWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        CupertinoButton(
          child: const Text(
            'Go home',
            style: TextStyle(color: Color.fromRGBO(0xFF, 0xFF, 0xFF, 1)),
          ),
          onPressed: () =>
              {Navigator.popUntil(context, ModalRoute.withName(router.home))},
        ),
        Container(
          height: 50,
        )
      ],
    ));
  }
}

CodePudding user response:

When returning CupertinoPageRoute inside generateRoute, try passing settings too, i.e.

return CupertinoPageRoute(
    settings: settings, 
    builder: (context) => const Home()
);

or

return CupertinoPageRoute(
    settings: const RouteSettings(name: home),
    builder: (context) => const Home()
);

I believe otherwise the Navigator is not aware of the route names, which causes popUntil to pop until there are no more routes (thus the black screen).

  • Related