How to set the property pageRouteBuilder of WidgetsApp in Flutter

Question

I'm trying to understand how navigation in Flutter works at a basic level, beyond the Material design convenience widgets, in order to implement a non-standard navigation scheme.

I've been playing with the code from the answer here , and edited the build method from that code to be as follows, setting the routes and pageRouteBuilder properties to be non-null.

@override
 Widget build(BuildContext context) {
   return new WidgetsApp(
       onGenerateRoute: generate,
       pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) {
         return MaterialPageRoute(builder: (context) => Container(color: Colors.blue,));
         },
       onUnknownRoute: unKnownRoute,
       textStyle: const TextStyle(),
       initialRoute: "/",
       routes: <String, WidgetBuilder> {
         '/test': (BuildContext context) => Container(
           child: Text('test'), 
           color: Colors.green,
         ),
       },
       color: Colors.red);
 }

This throws the error

Error: The argument type 'MaterialPageRoute Function(RouteSettings, Widget Function(BuildContext))' can't be assigned to the parameter type 'PageRoute Function(RouteSettings, Widget Function(BuildContext))'

(I originally used a PageRoute widget in place of the MaterialPageRoute widget, but then also received the error that abstract classes could not be instantiated, so switched to MaterialPageRoute for convenience*, imagining that it would be an implementation of PageRoute.

*Rather than writing a new implementation of PageRoute for this toy example.)

I can't figure out how to fix this, as, as far as I can tell, the argument and parameter type are equivalent, and I can't find any examples on how to set the pageRouteBuilder property online. An explanation of why this error is occurring or a fix to this toy example would be greatly appreciated.

Answer 1

After poking around in material/app.dart to find how pageRouteBuilder is set there (if using Android Studio, write MaterialApp() anywhere, hover and Ctrl+click once underline appears, then search for 'pageRouteBuilder' in the file that opens), I have found that this can be fixed with

 @override
  Widget build(BuildContext context) {
    final MaterialPageRoute test = MaterialPageRoute<int>(builder: (context) {
      return Container();
    });

    return new WidgetsApp(
        onGenerateRoute: generate,
        pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
          return MaterialPageRoute(builder: builder, settings: settings);
        },
        onUnknownRoute: unKnownRoute,
        textStyle: const TextStyle(),
        initialRoute: "/",
        routes: <String, WidgetBuilder>{
          '/test': (BuildContext context) => Container(
                child: Text('test'),
                color: Colors.green,
              ),
        },
        color: Colors.red);
  }

If I learn why <T> makes sense in this context in future, I'll edit this and explain as much here.