flutter：全局 context 在 navigator 与 overlay 中的运用

Flutter全局BuildContext：navigator与overlay实战

最新推荐文章于 2025-04-17 11:34:46 发布

原创

最新推荐文章于 2025-04-17 11:34:46 发布 · 836 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

本文介绍了Flutter中context的概念及其在导航、Dialog、主题配置和Overlay中的应用。通过设置MaterialApp的navigatorKey，维护一个全局BuildContext，方便在项目各处调用。文中提供了创建GlobalContext工具类的示例，以及使用全局context进行页面跳转和实现toast功能的方法。同时，文章解释了为何在某些情况下需要两层MaterialApp来支持全局overlay操作。

引言：什么是 context

flutter 中的概念 '万物皆 widget '。flutter 的UI布局由一个个 widget 叠加组合而成，而每一个 widget 都会对应一个 Element， Element 类内部会实现 BuildContext 接口。编码中，我们使用的 context 指向 widget 树中的具体 UI 节点。

context 在项目中的使用场景

在 flutter 编程中，我们常用 context 来实现如下功能：

1.navigator 导航进行页面的跳转。

Navigator.of(context).push(MaterialPageRoute(builder: (context) => PageA(),),)

2.弹窗 Dialog

showDialog(context: context, builder: (context) {return Dialog(child: Page(),);})

3.获取主题配置

final themeData = Theme.of(context);

4.添加 Overlay 图层 (常用于自定义 loading，toast 等能力支持)

Overlay.of(context)?.insert(? extends OverlayEntry);

如何维护一个全局 context

利用 MaterialApp 节点的 navigatorKey 属性，维护一个适用于全局的 BuildContext。在需要使用 context 的地方可直接使用全局维护的 context 进行页面跳转，showLoading，toast 等功能实现。

创建一个维护 GlobalContext 的工具类 NavigatorProvider (可直接copy使用)

import 'package:flutter/material.dart';

/// 用于提供全局的 navigatorContext
class NavigatorProvider {final GlobalKey<NavigatorState> _

最低0.47元/天解锁文章