Flutter中不使用MaterialApp直接使用Navigatorclass（初始化）

Question

我正在尝试明确编写导航器代码，而不是使用 MaterialApp 的底层导航器，以便更好地理解它的工作原理并最终能够创建高度自定义的导航方案。

以下代码 returns 一个 Null check operator used on a null value 错误，尽管提供了我知道需要提供的所有字段。当包含注释代码，然后设置所有可设置的导航器字段时，错误消息仍然出现。

import 'package:flutter/material.dart';

void main() {
  runApp(CustomNavigation());
}

class CustomNavigation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
            builder: (context) => Container(
                  color: Colors.red,
                ));
      },
      onUnknownRoute: (routeSettings) =>
          MaterialPageRoute(builder: (BuildContext context) {
        return Container(
          color: Colors.green,
        );
      }),
      // key: GlobalKey(),
      // onGenerateInitialRoutes: (state, string) => [
      //   MaterialPageRoute(builder: (BuildContext context) {
      //     return Container(
      //       color: Colors.white,
      //     );
      //   }),
      // ],
      // onPopPage: (route, result) => true,
      // pages: [
      //   MaterialPage(
      //       child: Container(
      //     color: Colors.purple,
      //   ))
      // ],
      // observers: [NavigatorObserver()],
      // reportsRouteUpdateToEngine: true,
      // restorationScopeId: 'I am a string',
      // transitionDelegate: DefaultTransitionDelegate(),
    );
  }
}

什么空值导致此错误消息？

Answer 1

知道了！ Overlay 小部件（包含 Navigator 管理顺序以创建导航体验的路由，在覆盖层中较高的路由在覆盖层中较低的路由之后绘制）需要 textDirection 信息！空值是指在渲染 Overlay 时请求的 Directionlity.of(context)。添加方向性小部件可以解决此问题，如此处的固定代码所示：

import 'package:flutter/material.dart';

void main() {
  runApp(CustomNavigation());
}

class CustomNavigation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Navigator(
          onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
            builder: (context) => Container(
                  color: Colors.red,
                ));
      }),
    );
  }
}

（要将这个用于空值调试的最小工作示例变成有用的/自定义导航，请在 onGenerateRoute 中的 routeSettings.name 上使用 switch 语句并编写 class 扩展 PageRoute 以代替使用MaterialPageRoute。）

Flutter中不使用MaterialApp直接使用Navigatorclass（初始化）

Directly using Navigator class without MaterialApp in Flutter (initialization)

flutter

flutter-navigation