4

The setup

I have to simple routes, FirstRoute and SecondRoute. Each one contains a button to for the navigation. Pressing FirstRoute's button leads to second and vice-versa.

The exception

I am getting an exception when I am trying to navigate from FirstRoute to SecondRoute for the second time (first try is successful). Judging by the message "Cannot install a MaterialPageRoute after disposing it" I somehow disposed a route but I can't figure out which route and how I did that.

Here is the full error log:

══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter (26569): The following assertion was thrown while handling a gesture:
I/flutter (26569): Cannot install a MaterialPageRoute<void> after disposing it.
I/flutter (26569): 'package:flutter/src/widgets/routes.dart': Failed assertion: line 175 pos 12:
I/flutter (26569): '!_transitionCompleter.isCompleted'
I/flutter (26569): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (26569): more information in this error message to help you determine and fix the underlying cause.
I/flutter (26569): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (26569):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (26569): When the exception was thrown, this was the stack:
I/flutter (26569): #2      TransitionRoute.install (package:flutter/src/widgets/routes.dart:175:12)
I/flutter (26569): #3      ModalRoute.install (package:flutter/src/widgets/routes.dart:895:11)
I/flutter (26569): #4      NavigatorState.push (package:flutter/src/widgets/navigator.dart:1742:11)
I/flutter (26569): #5      Navigator.push (package:flutter/src/widgets/navigator.dart:1081:34)
I/flutter (26569): #6      _createOnPressed.<anonymous closure> (package:layout_tutorial/main.dart:46:32)
I/flutter (26569): #7      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:513:14)
I/flutter (26569): #8      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:568:30)
I/flutter (26569): #9      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:166:24)
I/flutter (26569): #10     TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:246:9)
I/flutter (26569): #11     TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:175:7)
I/flutter (26569): #12     PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:436:9)
I/flutter (26569): #13     PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:73:12)
I/flutter (26569): #14     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:101:11)
I/flutter (26569): #15     _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:214:19)
I/flutter (26569): #16     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:192:22)
I/flutter (26569): #17     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:149:7)
I/flutter (26569): #18     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:101:7)
I/flutter (26569): #19     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:85:7)
I/flutter (26569): #23     _invoke1 (dart:ui/hooks.dart:223:10)
I/flutter (26569): #24     _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5)
I/flutter (26569): (elided 5 frames from class _AssertionError and package dart:async)
I/flutter (26569): Handler: onTap
I/flutter (26569): Recognizer:
I/flutter (26569):   TapGestureRecognizer#1bc15(debugOwner: GestureDetector, state: possible, won arena, finalPosition:
I/flutter (26569):   Offset(164.3, 365.3), sent tap down)
I/flutter (26569): ════════════════════════════════════════════════════════════════════════════════════════════════════

and here is the whole code in case someone wants to reproduce the error:

import 'package:flutter/material.dart';

typedef void OnPressed();

main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _getRouteScaffold('First route', 'Go to second route',
        _createOnPressed(context, route: SecondRoute()));
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _getRouteScaffold(
        'Second route', 'Back to first route', _createOnPressed(context));
  }
}

Widget _getRouteScaffold(String title, String buttonText, OnPressed function) {
  return Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: Center(
        child: RaisedButton(
      child: Text(buttonText),
      onPressed: function,
    )),
  );
}

OnPressed _createOnPressed(BuildContext context, {StatelessWidget route}) {
  OnPressed function;
  if (route != null) {
    MaterialPageRoute<void> materialRoute =
        MaterialPageRoute<void>(builder: (context) => route);
    function = () => Navigator.push(context, materialRoute);
  } else {
    function = () => Navigator.pop(context);
  }
  return function;
}
Themelis
  • 4,048
  • 2
  • 21
  • 45

1 Answers1

5

All of those approaches are imho not best practices, but I am sure there was a reason to build this, the way it is built. Anyway I found the error in line 16:

_createOnPressed(context, route: SecondRoute()));

You pass this function to the button, which will always execute with the same SecondRoute. After a MaterialPageRoute has been disposed, it cannot be used anymore. Therefore you'll have to build a new route each time.

To do this you can simply warp your method call in another closure, which will then be executed on press, an initiate a new instance. I've simply adjusted line 16 to fix your error:

() => _createOnPressed(context, route: SecondRoute())());

Cheers :)

NiklasPor
  • 9,116
  • 1
  • 45
  • 47
  • *All of those approaches are imho not best practices*, which approaches are you referring to? The way the code is structured maybe? – Themelis Mar 29 '19 at 12:39
  • I would suggest to simply call `Navigator.push(..)` and `Navigator.pop(..)` directly instead of building it with the `_createOnPressed` method. Also, even if I genereally discourage duplicate code, it may be better to simply use two times the `Scaffold` widget, instead of building it with designated method. Your solution seems a bit overcomplicated, for a simple usecase. (May be it is simplified, and I have no idea what the actual code looks like.) Anyway, code style is always a personal opinion, so take mine with a grain of salt. – NiklasPor Mar 29 '19 at 12:43
  • Actually I agree with you but my lack of experience on functional programming (I am guessing that's functional programming) lead me to that error. I just tried to refactor the code and instead of clean it the result felt... unnatural. – Themelis Mar 29 '19 at 12:46
  • No problem, I would just call it clean code. Functional programming may go in another direction. Anyway, as always it comes with experience, and writing Dart in Flutter is additionally a lot different from other frameworks. – NiklasPor Mar 29 '19 at 12:48
  • 1
    Ok now I'm getting it. Functions here are objects too, so my mistake was passing a reference of `_createOnPressed()` and the framework was always referring to that same object all the time. Your way created new `_createOnPressed()` for every press. Thanks a lot for your help! – Themelis Mar 29 '19 at 12:51
  • 1
    Always happy to help! – NiklasPor Mar 29 '19 at 12:53