围观 MaterialApp, Navigator, Route, OverlayEntry, Overlay 合伙'直播' Widget

围观 MaterialApp, Navigator, Route, OverlayEntry, Overlay 合伙'直播' Widget

自己写的widget是怎么被展示的？Navigator是怎么切换页面的？Navigator、Route、OverlayEntry都有啥联系？
从一个简单例子通过源码看这些组件怎么合伙‘直播’Widget的。 基于flutter版本1.12.13+hotfix.8。

简单例子：

main.dart

runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: appName,
        home: HomePage(),
        navigatorObservers: [myNavigatorObserver],
        showPerformanceOverlay: true
        ...
    );
  }
}

MaterialApp是啥？

material/app.dart

/// An application that uses material design.
class MaterialApp extends StatefulWidget {
    @override
    _MaterialAppState createState() => _MaterialAppState();
}

class _MaterialAppState extends State {
    List _navigatorObservers;  // 保存了外面传的NavigatorObserver
    
    void initState() {
        _navigatorObservers = List.from(widget.navigatorObservers)
            ..add(_heroController);
    }

    Widget build(BuildContext context) {
        Widget result = WidgetsApp(       // 借用了WidgetsApp并传递所有属性值
           key: GlobalObjectKey(this),
          navigatorKey: widget.navigatorKey,
            navigatorObservers: _navigatorObservers,
            pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) {  // 初始化了pageRouteBuilder
                return MaterialPageRoute(settings: settings, builder: builder);
            },
            home: widget.home,
            routes: widget.routes,
            ...    // 把MaterialApp的参数都传递了
        );
        return ScrollConfiguration(   // 
            child: result,
        );
    }
}

就是说 MaterialApp 的内核是 WidgetsApp。

WidgetsApp是啥？

widgets/app.dart

/// wraps a number of widgets that are commonly required for an application.
class WidgetsApp extends StatefulWidget {
}

class _WidgetsAppState extends State with WidgetsBindingObserver {
    GlobalKey _navigator;
    initState() {
        _navigator = widget.navigatorKey ?? GlobalObjectKey(this);  // GlobalObjectKey
        WidgetsBinding.instance.addObserver(this);  // 注册了自己（WidgetsBindingObserver）监听如didPopRoute、didPushRoute、didChangeLocales
    }

    Widget build(BuildContext context) {
        Widget navigator = Navigator(     // 包装了Navigator ！
            key: _navigator,       // key是_navigator
            initialRoute: '/'      //  就是home属性指代的widget
            onGenerateRoute: _onGenerateRoute,
            onUnknownRoute: _onUnknownRoute,
            observers: widget.navigatorObservers,
        );

        Widget result = navigator;
        // 下面根据widget的属性值装饰result，如builder、textStyle、performanceOverlay、onGenerateTitle等
        Widget title = title = Title(  // 
            title: widget.title,
            color: widget.color,
            child: result
        );
        return Shortcuts(
            shortcuts: _keyMap,
            child: Actions(
                actions: _actionMap,
                child: DefaultFocusTraversal(
                policy: ReadingOrderTraversalPolicy(),
                child: _MediaQueryFromWindow( // _MediaQueryFromWindowsState with了WidgetsBindingObserver，监听window的属性变化、系统字体大小变化做rebuild
                         child: Localizations(
                        locale: appLocale,
                        delegates: _localizationsDelegates.toList(),
                            child: title,
                        )
                    )
                )
            )
        );
    }

    Route _onGenerateRoute(RouteSettings settings) {
        // 检查settings.name是'/'或者widget.routes里的，是就用widget.pageRouteBuilder（WidgetsApp默认是MaterialPageRoute）包装widget.home
        // 这个widget生成route，否则用widget.onGenerateRoute生成route。
    }
}

就是说 WidgetsApp 里包装了Navigator，传递了初始route名，还监听了window的属性变化、系统字体大小变化来rebuild自己。

Navigator是啥？

widgets/navigator.dart

/// A widget that manages a set of child widgets with a stack discipline.
/// [Navigator.of] operates on the nearest ancestor [Navigator] from the given
/// [BuildContext]. Be sure to provide a [BuildContext] below the intended
/// [Navigator].
class Navigator extends StatefulWidget {
    static NavigatorState of(   // 通过of()获取离context最近的Navigator对象的NavigatorState，要确保context是Navigator的子孙节点
        BuildContext context, {
        bool rootNavigator = false,
        bool nullOk = false,
    }) {
        final NavigatorState navigator = rootNavigator
            ? context.findRootAncestorStateOfType()
            : context.findAncestorStateOfType();
        return navigator;
    }
    
    static Future push(BuildContext context, Route route) { // 各种push、pop api都是调用Navigator.of().XXX
    return Navigator.of(context).push(route);
  }
}

class NavigatorState extends State with TickerProviderStateMixin {
    final GlobalKey _overlayKey = GlobalKey();
    final List> _history = >[];
    final Set> _poppedRoutes = >{};

    /// The [FocusScopeNode] for the [FocusScope] that encloses the routes.
    final FocusScopeNode focusScopeNode = FocusScopeNode(debugLabel: 'Navigator Scope');

    final List _initialOverlayEntries = [];
    OverlayState get overlay => _overlayKey.currentState;
    
    initState() {
        Route