首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有办法在Flutter中的多个PageRoutes中使用一个InheritedWidget?

在Flutter中,可以使用InheritedWidget在多个PageRoutes之间共享数据。InheritedWidget是Flutter中的一个特殊Widget,它可以将数据在Widget树中向下传递,并且在子Widget中可以通过BuildContext来获取共享的数据。

要在多个PageRoutes中使用一个InheritedWidget,首先需要创建一个继承自InheritedWidget的自定义Widget,该Widget将包含需要共享的数据。例如,我们可以创建一个名为MyDataInheritedWidget的类:

代码语言:txt
复制
class MyDataInheritedWidget extends InheritedWidget {
  final String sharedData;

  MyDataInheritedWidget({required this.sharedData, required Widget child})
      : super(child: child);

  @override
  bool updateShouldNotify(MyDataInheritedWidget oldWidget) {
    return sharedData != oldWidget.sharedData;
  }

  static MyDataInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyDataInheritedWidget>();
  }
}

在上面的代码中,我们定义了一个名为sharedData的共享数据,并通过构造函数传入。updateShouldNotify方法用于判断是否需要通知子Widget进行更新。of方法用于在子Widget中获取共享数据。

接下来,在需要共享数据的Widget树的根部,将MyDataInheritedWidget作为根Widget,并将需要共享的数据传入:

代码语言:txt
复制
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyDataInheritedWidget(
      sharedData: 'Shared Data',
      child: MaterialApp(
        title: 'Flutter Demo',
        home: HomePage(),
      ),
    );
  }
}

在上面的代码中,我们将MyDataInheritedWidget作为根Widget,并将sharedData设置为"Shared Data"。

现在,我们可以在任何子Widget中使用MyDataInheritedWidget中共享的数据。例如,在一个子Widget中,我们可以通过MyDataInheritedWidget.of(context)来获取共享的数据:

代码语言:txt
复制
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final sharedData = MyDataInheritedWidget.of(context)?.sharedData ?? '';

    return Text(sharedData);
  }
}

在上面的代码中,我们使用MyDataInheritedWidget.of(context)来获取共享的数据,并将其显示在Text Widget中。

通过以上步骤,我们就可以在Flutter中的多个PageRoutes中使用一个InheritedWidget来共享数据了。

推荐的腾讯云相关产品:无

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter状态管理(1)——InheritedWidget

Flutter状态管理系列主要指的是全局状态管理,主要介绍几种实现方式有: InheritedWidget StreamBuilder Provider 前两种,框架自带;第三种是google推荐使用三方库...InheritedWidget实现全局状态管理 Flutter数据传输,介绍了数据从上向下传输方式,其中介绍了InheritedWidget使用,当时例子是一个page里面,数据从上向下传输...InheritedWidget问题 这里我们只有一个状态,试想,如果有多个全局状态,那么应该怎么实现?...一个InheritedWidget多个表示状态类;需要考虑InheritedWidgetupdateShouldNotify方法需要如何实现,每个状态稍有不同就去通知,那么全局那么多Widget都会收到消息...原理 关于InheritedWidget实现原理,可以参考从 Flutter 源码看 InheritedWidget 内部实现原理 总结 可以发现InheritedWidget使用,可以看做是全局创建

1.2K31
  • 干货 | 携程火车票Flutter最佳实践

    我们根Widget继承了InheritedWidget,然后该组件存放一个数据data,那么可以在任意子Widget来获取该组件数据并使用。...当在任一组件改变了共享数据data,InheritedWidget组件会自上而下通知所有使用过共享数据组件并刷新组件,同时会回调didChangeDependencies() 方法。...,多个NotifierProvider时使用MutiProvider包装,如下: ///多个NotifierProvider时候 return MultiProvider(providers: [...三、Flutter 性能调优 一个新技术改造完成,我们最关注的当然是性能体验有没有达到预期。那Flutter页面性能评判标准是什么,如何去度量,有没有可视化工具,帮我们去做一些性能调优。...2)控制刷新范围与次数 尽量避免滑动监听触发setStat()刷新视图。 ? 如上图所示,需要滑动过程,显示、隐藏标题栏,并且是一个渐变过程,遇到这种情况,一定要尽量控制刷新范围和频次。

    2.2K30

    Flutter完整开发实战详解(十五、全面理解State与Provider)

    了解这个两个概念后,我们先看下图, Flutter 构建一个 Widget ,首先会创建出这个 Widget Element ,而事实上 State 实现跨帧共享,就是将 State 保存在Element...4、状态共享 前面我们聊了 Flutter State 作用和工作原理,接下来我们看一个老生常谈对象: InheritedWidget 。...状态共享是常见需求,比如用户信息和登陆状态等等,而 Flutter InheritedWidget 就是为此而设计第十二篇我们大致讲过它: Element 内部有一个 Map<Type...0、演示代码 如下代码所示, 实现一个点击计数器,其中: _ProviderPageState 中使用MultiProvider 提供了多个 providers 支持。...,相信用过 BLoC 模式同学会感觉很贴心,以前正常用做 BLoC 时,每个 StreamBuilder snapShot 只支持一种类型,多个时要不就是多个状态合并到一个实体,要不就需要多个StreamBuilder

    3.6K21

    Flutter | 数据共享

    本文示例代码 数据共享 InheritedWidget InheritedWidgetFlutter 中非常重要一个功能型组件,它提供了一种数据 widget 树从上到下传递方式。...例如在根 Widget 通过 InheritedWidget 共享了一个数据,那么我们就可以在任意子 Widget 获取改共享数据; 这个特性一些需要 widget 树中共享数据场景非常方便...Flutter Framework 调用,这个依赖指就是 widget 是否使用了父 widget InheritedWidget 数据; 如使用了,则代表该组件依赖 InheritedWidget..., build 方法中使用了 ShareDataWidget 数据,同时回调打印了日志 最后,创建一个按钮,点击一次,就让 ShareDataWidget 值自增 class TestInheritedWidget...,都会被重新执行 build,这是没必要,那有什么办法可以避免呢,答案是使用缓存; 一个简单做法就是通过封装一个 StatefulWidget ,将 Widget 树缓存起来,这样就可以放在 build

    1.3K30

    flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用

    flutter 必知必会 」贴心解析:状态管理与数据共享 InheritedWidget 完整使用方案,为你铺平大前端学习之路 一、前言 由于Flutter采用节点树方式组织页面,以致于一个普通页面的节点层级会很深...《Flutter 实战》中讲到:InheritedWidgetFlutter 中非常重要一个功能型组件,它提供了一种数据 widget 树从上到下传递、共享方式 比如我们应用根 widget...通过 InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 来获取该共享数据!...那么废话不多说,我们直接开始介绍 InheritedWidget 使用 二、未引入时 下面我们以系统自带模版为例,逐步引入 InheritedWidget 当 new flutter project...} 3.2 封装 InheritedWidget 新建一个类,并让其继承与 InheritedWidget作用是将页面与数据类绑定 class _InheritedWidget extends

    67710

    使用InheritedWidget来进行状态管理

    之前我写过一篇文章使用Provider来进行状态管理,介绍了Flutter如何通过Provider来进行状态管理,今天我们来介绍状态管理另外一种方式——InheritedWidget。...InheritedWidgetFlutter中非常重要一个功能性组件,它提供了一种数据widget树自上而下传递、共享方式。...比如,我们应用根Widget通过InheritedWidget共享了一个数据,那么我们就可以在任意子Widget获取到共享这个数据。...接下来我们通过一个计数器例子来看一下InheritedWidget 使用。...我使用Provider来进行状态管理中介绍Provider就是对InheritedWidget封装,而刚才说到缓存操作,Provider是有实现

    44020

    数据(事件)传递

    平时开发我们都会遇到很多数据传递例子,在前面的文章我们接触队夺得就是构造方法属性传递,但是flutter并不是只有这一种传递方法,今天我们就来看看Flutter中常用数据传递方式 1....InheritedWidget InheritedWidgetFlutter 一个功能型 Widget,构建Widget同时可以Widget层向下传递,适用于 Widget 树中共享数据场景...接下来,我们就使用一个简单例子来看下如何使用InheritedWidget,还是以计数器为例。...3.Notification Notification中文意思是通知,与Android广播机制类似,FlutterNotification功能是子节点状态变更,发送通知上报。...Wdiget树,没有办法脱离Wdiget使用

    91120

    2021 年值得期待 Flutter 数据流管理方案

    不像 Redux React 独占鳌头,Flutter 数据流管理方案层出不穷,本文旨在介绍2021年值得使用 Flutter 数据流管理方案,除了大家都比较熟悉 InheritedWidget...2.1 使用方法 具体使用方法比较简单,就不过多介绍,简单说一下使用步骤: 先通过继承 InheritedWidget 实现一个保存状态与状态更改方法 widget 将这个 widget 放在需要使用该状态最小子树顶层...需要用到状态子树中使用 of 方法获取状态 下面来看看 InheritedWidget 是如何工作。...一般情况下,整个 widget 树最外层包上一个 ProviderScope,state 存放于此处,当然如果想覆盖上一层state 的话,可以使用多个 ProviderScope void...方法1:flutter_riverpod 提供了一个 ConsumerWidget,它会在 build 函数多提供了一个 ScopedReader 函数来从 provider 获取值并使 state

    2K20

    flutter 必知必会 」详细解析数据共享 InheritedWidget 完整使用

    flutter 必知必会 」贴心解析:状态管理与数据共享 InheritedWidget 完整使用方案,为你铺平大前端学习之路 一、前言 由于Flutter采用节点树方式组织页面,以致于一个普通页面的节点层级会很深...《Flutter 实战》中讲到:InheritedWidgetFlutter 中非常重要一个功能型组件,它提供了一种数据 widget 树从上到下传递、共享方式 比如我们应用根 widget...通过 InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 来获取该共享数据!...那么废话不多说,我们直接开始介绍 InheritedWidget 使用 二、未引入时 下面我们以系统自带模版为例,逐步引入 InheritedWidget 当 new flutter project...} 3.2 封装 InheritedWidget 新建一个类,并让其继承与 InheritedWidget作用是将页面与数据类绑定 class _InheritedWidget extends

    65520

    实现Flutter应用全局导航栏效果

    因此,设计一个清晰、易用导航栏对于提升用户体验和应用可用性至关重要。 Flutter应用开发,实现全局导航栏效果意味着无论用户应用哪个页面,导航栏内容和状态都保持一致。...本篇博客将探讨Flutter应用实现全局导航栏效果方法,包括使用状态管理器、InheritedWidget、混入等技术。...如何使用InheritedWidget实现全局导航栏效果 要使用InheritedWidget实现全局导航栏效果,可以将导航栏状态提升到InheritedWidget,并在需要使用导航栏页面访问和更新导航栏状态...它允许类不继承自其他类情况下,复用和扩展已有的功能。Dart和Flutter,混入是通过使用关键字with来实现,可以将一个多个混入类与主类进行组合,从而增强主类功能。...案例研究:全局导航栏应用 背景: 假设我们正在开发一个移动应用,该应用包含多个页面,并希望整个应用中使用全局导航栏来管理页面之间导航。

    14411

    【源码分析】系列之 InheritedWidget

    Notification 也是 Flutter 中非常重要,后面会有专门文章详细介绍,此篇不做介绍。 那么什么样场景适合使用 InheritedWidget 呢?...InheritedWidget 基本用法 上面分析了 InheritedWidget 组件使用场景,下面用一个最简单 demo 展示如何使用 InheritedWidget 组件。...时只会执行 build 函数,而访问服务器接口是一个耗时工作,考虑性能因素,不能将访问服务器接口放在 build 函数,那么 InheritedWidget 数据更新就无法更新其依赖组件,而 updateShouldNotify...下面重点来了,那么如何正确使用 InheritedWidget 组件,答案是 InheritedWidget + ValueNotifier,关于 ****用法可以到我个人博客查看,地址:http...上面的代码都是 InheritedElement ,在看下 InheritedWidget 源代码: abstract class InheritedWidget extends ProxyWidget

    1.1K20

    flutter系列之:flutter架构什么,看完这篇文章就全懂了

    当然,开发过程flutter提供了虚拟机,实现了hot reload功能,代码进行修改之后,可以立刻重载,而不需要重新编译整个代码。 FLutter这么神奇,那么它到底是怎么工作呢?...即便是一个很小很小功能,Flutter中都可以找到与之对应Widgets。...这里应该可以理解FlutterWidget设计思想了。Flutter中一切皆可为Widget。...这样做好处就是一切都是由Flutter自己控制使用者可以Flutter基础上进行无限扩展,而不用受限于系统底层实现限制。...另一方面,这样可以减少Flutter呈现过程Flutter代码和平台代码之间来回转换,减少了性能瓶颈,提升效率。

    98530

    Flutter完整开发实战详解(五、 深入探索)

    是的,Flutter 使用是 Dart 支持 Mixin ,而 Mixin 能够更好解决多继承容易出现问题,如:方法优先顺序混乱、参数冲突、类结构变得复杂化等等。...二、InheritedWidget InheritedWidget一个抽象类, Flutter 扮演者十分重要角色,或者你并未直接使用过它,但是你肯定使用过和它相关封装。 ?...同时我们日常使用传递 BuildContext 也都是一个 Element 。...是否将需要共享 State,都放在一个 InheritedWidget ,然后使用 widget 中直接取用就可以呢?答案是肯定!... PaintingBinding 内有一个 ImageCache 对象,该对象全局一个单例,同时再图片加载时 ImageProvider 所使用,所以设置图片缓存大小如下: //缓存个数 100

    1.8K30

    Flutter 专题】100 何为 Flutter Widgets ?

    StatelessWidget / StatefulWidget StatelessWidget 是状态不可变 Widget,主要通过 build() 方法,把一个多个 Widget 整合成一个...Widget;这也完全符合 Flutter 【组合大于继承】思想;StatelessWidget 核心方法就是 build() 方法,把多个 Widget 组合包装成一个 Widget; abstract...ProxyWidget ProxyWidget 作为一个抽象代理 Widget 并没有实质性作用,只是父类和子类需要传递信息时使用;主要有 InheritedWidget 和 ParentDataWidget...Bloc 或 Provider 等状态管理朋友都了解过 InheritedWidget,主要都是对 InheritedWidget 优化和封装;可以树结构传递信息,当使用 InheritedWidget...构建相同类型 Widget 多个实例时很有用,例如 List 列表多个相同类型 item,可以提高列表效率; GlobalKey 可以作为应用全局唯一标识,整个 Widget 层级中都是唯一

    83231

    Flutter 组件集录 | InheritedModel 共享模型

    上一篇 《Flutter 组件集录 | InheritedWidget 共享数据》介绍了 InheritedWidget 对 跨节点共享数据 价值。...本篇看一下 Flutter 源码基于 InheritedWidget 实现 InheritedModel 组件。它通过定义 Aspect(方面) 来更精细地控制依赖更新粒度。...创建 InheritedModel 派生类 和 InheritedWidget 一样,InheritedModel 也是一个抽象类。所以必须定义派生类来使用。如下: [1]....使用 InheritedModel InheritedModel 是 InheritedWidget 基础上拓展加强版,使用方式上也非常类似:如下 B 组件只需要访问颜色,就通过 CounterModel.of...InheritedModel 源码中有三处使用场景,分别是 MeduaQuery、SharedAppModel、TimePicker: 大喵Flutter 小技巧之 3.10 全新 MediaQuery

    15810

    Flutter 项目实战 」设计企业级项目入口 main.dart 设计与实现 ( GSYGithubApp 源码解读·二 )

    - runZoned Flutter ,还无法捕获异常,如调用空对象方法异常、Futurer 异常等 同样,对于 Dart 同步异常和异步异常,同步异常可以通过 try/catch 捕获...《Flutter 实战》中讲到:InheritedWidgetFlutter 中非常重要一个功能型组件,它提供了一种数据 widget 树从上到下传递、共享方式 比如我们应用根 widget...InheritedWidget 基本使用: 还没有学会 使用同学可以先查看这篇文章进行学习 「flutter 必知必会」详细解析数据共享 InheritedWidget 完整使用 2.3.1...必知必会 」最强数据管理方案 flutter_redux 使用解析 OK,那么一个企业级项目的 main.dart 木块该如何使用 flutter_redux 呢?...,HomePage 监听到后都能统一显示 Toast 很明显这是一个多对一情形(多个发送方对一个接收方 HomePage),而且发送事件逻辑是分散不同功能模块,所以我们不要采用 event_bus

    1.1K21

    flutter系列之:查询设备信息利器:MediaQuery

    不用怕,flutter为我们提供了一个叫做MediaQuery利器,大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看,它意思是媒体查询。...很多时候,我们需要从widget子widget获取到父widget对象,InheritedWidget就是一个可以提供简单获取方法对象。...InheritedWidget可以实现of方法,通过调用BuildContext.dependOnInheritedWidgetOfExactType来从context获取最临近InheritedWidget...这里,因为MediaQuery是一个媒体查询工具,所以我们可能需要在很多地方随时随地进行对象获取,那么这里使用InheritedWidget就是再好不过了。...一个物理像素可能代表多个逻辑像素,这个对应关系就是由devicePixelRatio这个属性来决定。 devicePixelRatio表示一个物理像素代表多少个逻辑像素。

    84020
    领券