Flutter中直接使用不带MaterialApp的Navigator类（初始化）答案

【问题标题】：Directly using Navigator class without MaterialApp in Flutter (initialization)Flutter中直接使用不带MaterialApp的Navigator类（初始化）
【发布时间】：2021-02-06 01:44:27
【问题描述】：

我正在尝试显式编写导航器，而不是使用 MaterialApp 引擎盖下的导航器，以便更好地了解它的工作原理并最终能够创建高度自定义的导航方案。

以下代码返回Null check operator used on a null value 错误，尽管提供了我知道必须提供的所有字段。当包含注释代码，然后设置所有可设置的 Navigator 字段时，错误消息仍然出现。

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(),
    );
  }
}

什么空值导致了这个错误信息？

【问题讨论】：

据我了解，Navigator 类仍在 Navigation 2.0 中使用（在路由器的引擎盖下或直接使用）。 Pages 类和 Navigator 类中的 pages 参数是新的（请参阅您链接的文章中的“页面”部分和Router doc）。无论是使用 pages 参数还是 onGenerateRoute，都会出现上述空值错误。我想我不妨尝试使用更熟悉的导航系统来修复它，以减少因对导航 2.0 的误解而混淆变量的可能性！

标签： flutter flutter-navigation

【解决方案1】：

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

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 语句，并编写一个扩展 PageRoute 的类来代替 MaterialPageRoute。）

【讨论】：