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

未更改状态的Flutter showModalBottomSheet需要重新打开才能看到更改

Flutter是一种跨平台的移动应用开发框架,可以用于开发iOS和Android应用。showModalBottomSheet是Flutter中的一个函数,用于显示一个模态底部弹出窗口。根据提供的问答内容,问题是关于未更改状态的Flutter showModalBottomSheet需要重新打开才能看到更改的情况。

在Flutter中,当我们使用showModalBottomSheet函数显示底部弹出窗口时,如果底部弹出窗口中的内容依赖于某个状态,而该状态在底部弹出窗口关闭之前发生了变化,那么在重新打开底部弹出窗口之前是无法看到状态的更改的。

这是因为showModalBottomSheet函数创建的底部弹出窗口是一个新的Widget树,它与底部弹出窗口之前的Widget树是相互独立的。因此,当底部弹出窗口关闭后,之前的Widget树会被销毁,而重新打开底部弹出窗口时会创建一个新的Widget树。

为了解决这个问题,我们可以使用Flutter中的状态管理来确保底部弹出窗口中的内容能够及时更新。常见的状态管理方案包括使用setState函数、使用Provider库、使用BLoC模式等。

具体而言,可以按照以下步骤来解决问题:

  1. 在底部弹出窗口的父组件中定义一个状态,用于保存底部弹出窗口中的内容需要依赖的数据。
  2. 在底部弹出窗口的父组件中使用setState函数来更新状态,当底部弹出窗口中的内容需要更新时调用setState函数。
  3. 在底部弹出窗口的子组件中使用该状态来展示内容,确保内容能够及时更新。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 入门指北之弹窗和提示(干货)

可以看到 showBottomSheet 会充满整个屏幕,然后 fab 会跟随一起到 AppBar 底部位置,而 showModalBottomSheet 展示高度不会超过半个屏幕高度,但是 fab...假如我们只需要展示 2-3 个 item,但是按照刚才方式 showModalBottomSheet 高度太高了,那我们可以在 ListView 外层包裹一层 Container,然后指定 height...get package 后给 MaterialApp 加入如下属性,这样就会支持中文了,这里需要导入包 package:flutter_localizations/flutter_localizations.dart...Dialog 状态保持 假如有个需求,需要在弹出 Dialog 显示当前被改变值,然后通过按钮可以修改这个值 ,该如何实现。...context 不是共享,如果需要动态修改 dialog 状态值,需要通过 StatefulBuilder 或者自定义 dialog 继承于 StatefulWidget 来实现 所以解决方法很明确

2.2K20
  • Flutter 专题】20 图解【分享页面】底部对话框

    和尚在学习 Flutter 过程中需要处理一个类似 Android 中 PopupWindow 效果分享弹框页。看似很简单页面,里面却有很多值得尝试地方。...1.2 若此时设置内容 Widget 宽高,会发现依旧是重新打开一个页面,高度从底向上占据所设置高度,且点击空白区不会消失,如图: ?...Modal 式工作表:是一个半透明页面,默认占据屏幕一半 ScaffoldState.showModalBottomSheet。...方式开启工作表,同时内容 Widget 不限制宽高,效果为打开一个半透明页面,默认占据屏幕一半,点击空白区工作表消失,如图: ?...2.2 若此时设置内容 Widget 宽高,会发现依旧是打开一个半透明页面,高度从底向上占据所设置高度,且点击空白区会消失,如图: ?

    1.2K71

    你知道吗,Flutter内置了10多种show

    applicationLegalese:著作权(copyright)提示。 children:位置如上图红蓝绿色位置。 所有的属性都需要手动设置,不是自动获取。...下面的2个按钮根据应用程序支持语言显示相应语言,比如显示中文方法如下: 在pubspec.yaml中配置支持国际化: dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域: MaterialApp( title: 'Flutter Demo...', ); 效果如下: [1240] 下面的英文我们是无法更改。...,效果如下: [1240] 弹出位置在屏幕左上角,我们希望弹出位置在点击按钮位置,因此需要计算按钮位置,计算如下: final RenderBox button = context.findRenderObject

    1.9K11

    开始使用-初尝胜果 顶

    尝试一个热重新加载 Flutter提供快速开发周期和热重载,可重新加载实时运行应用代码而无需重新启动或丢失应用状态。...只需对源代码进行更改,告诉IDE或命令行工具即可重新加载,并查看模拟器,仿真器或设备中更改。  ...3.要查看您更改,请调用Save All(cmd-s / ctrl-s),或单击Hot Reload按钮(带有闪电图标的按钮)。 您应该几乎立即在运行应用程序中看到更新字符串。...尝试一个热重新加载 Flutter提供快速开发周期和热重载,可重新加载实时运行应用代码而无需重新启动或丢失应用状态。...只需对源代码进行更改,告诉IDE或命令行工具即可重新加载,并查看模拟器,仿真器或设备中更改

    1.2K30

    Flutter iOS 真机测试 -- 值得收藏

    ,你需要选择一个团队,如果团队状态识别,你需要登陆。...成功选中后,我们可以看到状态变更为下面这样: Flutter Demo 是我项目的名称 此时,你可以在手机上看到一个名称为 Flutter Demo Flutter 应用。...此时你点击打开 Flutter Demo 应用,可能会得到下面的信息提示: 因为自己手机系统是 14.2,所以它告诉我,应用只能通过 IDE 发起或者是 Xcode。...所以,我们在 Xcode 上再次点击运行按钮,运行我们项目即可,可能会出现下面这个信任弹窗: 选择信任后,你可以看到我们 Flutter 应用内容了。...后话 在 IDE 上更改内容后,再次点击运行按钮之后,你在手机应用上可以看到更新内容。 很酷,是吧,读者感兴趣可以尝试一下~ 如果读者喜欢本文,不妨一键三连:点赞 + 收藏 + 关注

    3.5K50

    flutter实战项目之博客项目

    检查所有依赖迁移状态 通过以下命令检查你 package 迁移状态 dart pub outdated --mode=null-safety image-20210926165313327 上面的输出说明了所有依赖...注意: 该命令会更改 pubspec.yaml 文件。 运行 dart pub upgrade。 6. 迁移 你代码里大部分需要更改代码,都是可以轻易推导。...在你 IDE 上打开package 。你也许会看到很多错误,没关系,让我们继续。 利用分析器来辨析静态错误,逐个迁移 Dart 文件。按需添加 ?、!...# or `flutter test` 你可能需要更新使用了空值作为预期用例测试代码。...如果你需要对代码作出大量更改,那么你可能需要重新对代码进行迁移。这时请先回滚代码更改,再运行迁移工具进行迁移。

    84810

    谷歌 Flutter 1.17 发布

    谷歌透露:今年到目前为止,关闭漏洞比打开漏洞多,导致净减少了约800个问题。谷歌Flutter团队从231位贡献者那里合并了3,164个PR,从而修复了许多错误。...您可以在“ 物料日期选择器重新设计”规范中阅读有关详细信息。...2018年10月PR 22330中增加了对新配置选择加入支持,但不对新名称提供支持。现有的文本样式名称更改,因为这样做是一个重大API更改,可能会影响大多数应用程序。...此选项将安装仅依赖于您插件代码(不包括任何Dart代码或资产)通用Android应用。这允许重复flutter run命令启动速度更快,因为对Dart代码或资产更改需要重新构建APK。...重大变化 与往常一样,每个新版本Flutter中尽量减少重大更改数量,这些是此版本中重大更改

    3.5K10

    为啥Flutter Hooks没有受到太多关注和青睐?

    作者 | Jimmy Aumard 译者 | 王强 策划 | 张晓楠 了解 Flutter Hooks 并不需要 React 相关知识。...换句话说了解 Flutter Hooks 并不需要 React 相关知识。 Hooks 是一种与多个小部件共享同一代码方法,这些代码往往是在有状态小部件之间重复或难以共享代码。...const[] 表示在放弃(dispose)小部件之前,请勿调用 effect。你可以提供一组参数,当其中一个参数更改时将调用 effect。下面来看看另一个关于动画例子。...这是为了确保任意 key 被更改时都会重新创建 ticker provider。例如,当 tab 数量变化时就会重新创建它。...在这里,我们将 tickerProvider 传递为第二个参数,以便在 ticker 更改时(也就是在 length 或 initialIndex 更新时)重新创建控制器。这里依旧都是自动化

    1.1K20

    两分钟带你掌握FlutterStatelessWidget与StatefulWidget

    状态是在构建widget时可以同步读取信息,或者在widget生命周期中可能更改信息,在Flutter中如果要管理状态需要用到 StatefulWidget。...FlutterStatelessWidget是一个不需要状态更改widget - 它没有要管理内部状态。...调用setState告诉Flutter框架,某个状态发生了变化,Flutter重新运行build方法,以便应用程序可以应用最新状态。...当widget可以动态更改时,需要使用StatefulWidget。 例如, 通过键入表单或移动滑块来更改widget状态....如何决定使用哪种方式时,可以参考以下原则: 如果所讨论状态是用户数据,例如复选框已选中或选中状态,或滑块位置,则状态最好由父widget管理; 如果widget状态取决于动作,例如动画,那么最好是由

    1.5K10

    开始使用-编写你第一个Flutter应用程序 顶

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...如果需要,请使用以下链接中代码重新开始正轨。 pubspec.yaml(pubspec.yaml文件不会再更改。)...实现一个有状态小部件至少需要两个类:1)一个StatefulWidget类,它创建一个2)一个State类实例。...如果您尝试重新加载热点,则可能会看到一条警告: Reloading......你应该看到一个单词配对清单。 尽可能向下滚动,您将继续看到单词配对。 ? 问题? 如果您应用程序运行不正常,则可以使用以下链接中代码重新进入正轨。

    9.5K20

    Flutter 1.17版本重磅发布

    我们目标是按季度节奏发布稳定发行版;但是,此版本花费了更长时间,因为我们一直在为新发布过程重新调整基础架构。我们继续将质量作为第一要务,并相信新发布模型将提高我们提供服务能力。...这种增长很大一部分归功于我们与Nevercode合作关系,这使我们在响应客户问题方面的响应速度有所提高。今年到目前为止,我们今年关闭错误比打开错误多,导致净减少了约800个问题。...2018年10月PR 22330中增加了对新配置选择加入支持,但不对新名称提供支持。现有的文本样式名称更改,因为这样做是一个重大API更改,可能会影响大多数应用程序。...由于对Dart代码或素材资源更改无需重新构建APK,因此可以使重复flutter运行命令更快地启动。...如果您Android调试启动时间让您失望,请尝试一下。 如果您以Android为目标,则需要注意另一个变化是,当创建新Flutter项目时,AndroidX是唯一选择。

    2.5K10

    浅谈跨平台框架Flutter搭建与运行

    二、更新环境变量:若想在Windows系统自带命令行运行flutter命令,开发者需要添加以下环境变量到用户PATH:“控制面板->用户账户->更改环境变量”,同时,在“用户变量”下检查是否有名为“...Studio安装向导”并安装最新Android SDK、Android SDK工具和Android SDK构建工具,这些都是用Flutter进行Android开发所需要打开Android Studio...配置完成后,还需用source命令重新加载,具体命令如下: source ~/.bash_profile 完成以后, flutter安装工作已基本完成,但要进行开发,还需要使用命令来检测其是否成功安装...,热重载无需重启应用程序就能实时加载修改后代码,并且不会丢失状态。...对代码进行简单更改,然后使用IDE或命令行工具进行重新加载,可以在设备或模拟器上看到更改

    3.3K20

    使用 Android Studio 进行 Flutter 开发

    IntelliJ 主工具栏 选择目标设备 在 IDE 中打开 Flutter 项目时,你会在工具栏右侧看到一组 Flutter 特定按钮。...“如果 Run 和 Debug 按钮不可用且显示目标设备,则意味着 Flutter 未发现任何已连接 iOS 、Android 设备或模拟器。你需要连接设备或启动模拟器才能继续。...在进行操作之前,请确保你使用是最新版本 Android Studio 和 Flutter 插件。 在“项目视图”中,你可以在 flutter 应用根目录下看到一个 android 子目录。...你会在编辑器顶部看到一个 "Flutter commands" 横幅, 包含一个 Open for Editing in Android Studio 标签,点击它。...如果你还未运行过你 Flutter 应用,可能会在打开 android 项目时,看到 Android Studio 构建失败报告。

    6.3K30

    Flutter 凉了吗?

    几年前,我在Android和iOS开发中略有涉足,使用是Java和Objective-C。在花了大约一个月时间学习后,我决定不再深入学习了。我就是无法找到那种深入其中状态。...并再次输出: 有了异步操作,我们在执行需要比较久才能完成代码同时,其余代码执行也不会被妨碍。...你可以通过手动更改字体,颜色,并逐个设置所有内容,但这需要太长时间了。相反,Flutter为我们提供了一个名为ThemeData东西,它允许我们为颜色,字体,输入字段等等设值。...每个小部件文本样式必须手动地一个一个设置,但这仍然很简单: 为了进一步提高效率,Flutter可以热重新加载应用程序,因此您无需在每次更改UI时重新打开它。...您现在可以进行更改,保存,然后在大概一秒内就能看到更改效果。 4 库 Flutter提供了许多开箱即用强大功能,但有时你需要更多功能。

    3.1K20

    Flutter Hello World

    只要输入 import 'pfm'; 就会有提示了,这时候只要选第一行就Ok啦 接下来会看到这一句: // 每个应用都需要有个顶级 main() 入口函数才能执行。...当widget状态发生变化时,widget会重新构建UI,Flutter会对比前后变化不同, 以确定底层渲染树从一个状态转换到下一个状态所需最小更改(译者语:类似于React/Vue中虚拟DOM...widget是否需要管理一些状态。...唯一不同是: StatelessWidget 是无状态,意味着无法通过数据变更而更新 StatefulWidget 是有状态,意味着可以通过数据变更而更新,需要通过setState 来管理状态。...我没有打错字,因为对代码渲染结构进行了更改,所以需要使用 R) 什么?你居然不知道 R 键什么意思?那你现在还不立刻马上赶紧回去复习?!! 什么?你居然还分不清 r 和 R 区别?!!

    1.2K10

    Flutter 中 stateless 和 stateful widget 区别

    考虑到这一点,我们将研究 Flutter状态和有状态小部件,并解释它们区别。 让我们从这个问题开始:Flutter 中一个小部件状态是什么?...Flutter 内置了几个小部件,它们都分为有状态和无状态小部件。 无状态小部件 在 Flutter 应用程序运行期间,无状态小部件无法更改状态。这意味着在应用程序运行时无法重绘无状态小部件。...当我们创建不需要一次又一次重绘小部件应用程序时,我们使用无状态小部件。例如,当我们创建一个AppBar](,无状态小部件可以是不需要更改脚手架或图标。 无状态小部件类仅在初始化时调用一次。...它将被渲染一次并且不会自行更新setState() 有一个内部并且可以在输入数据更改重新渲染setState() 静态小部件 动态小部件 除非发生外部事件,否则无法在运行时更新 可以在运行时根据用户操作或数据更改进行更新...结论 我们已经介绍了有状态和无状态小部件之间差异,以帮助您构建更好 Flutter 应用程序。从示例中,我们了解了无状态和有状态小部件作用以及如何知道您用例需要哪个类。

    2.3K10

    Flutter 下载器 | flutter_download_manager源码解析

    最近发现了一个纯Dart实现下载库flutter_download_manager,相对来说各方面还算满足需求,支持断点续传,暂停,取消等我比较看重功能。但是有些地方还需要改进。...flutter_download_manager 简介 地址: flutter_download_manager 版本: 0.5.4 特点: 纯 Dart 实现 通过 url 管理下载任务 能够通知状态和进度更改...游离没法管控,只有先找到才能调配,通过 Map 持有 Task 句柄达到“找到”目的,其中_cache 中以方式在内存中缓存每个任务状态;而_queue 则是新添加下载任务请求...新规划任务:任务管理列表中无该记录情况,当新任务重新添加到请求列表中。 循环执行请求列表中各任务并适时更新管理列表中状态,直至请求列表为空。...请求列表自遍历执行是给暂停掉 Task 重新执行机会,Cancel 掉任务就没法再执行了(下述第 6 行)。

    1.1K20

    Flutter实现一个酷炫带动画列表型多选日历组件

    由于项目需要,用Flutter重构了之前用Android做过日历组件,整体效果感觉不错,流畅度甚至超过原来,这里需要提一下官网做法,如下: var date = DateTime.now(...showDatePicker实现,支持MD和IOS风格,但据我了解,只支持单选,不支持开始和结束日期区间选择,体验也与我需要效果不一致,所以经过考虑之后,还是决定自己写一个。...底部弹出方式日期方式 这块其实很简单,CalendarList本身就支持从底部滑出,调用方法是showModalBottomSheet,代码如下: showModalBottomSheet(...,这是一个典型子组件调用父组件改变其状态代码段,通过selectStartTime和selectEndTime是否为null判断用户点击行为落在哪个if else里面,通过setState重新设置开始和结束日期...此例已经作为补充内容添加至我Flutter从0到1构建大前端应用》一书源码中,是一个知识点比较多综合案例,再版时会根据读者意见考虑加入到书中讲解。

    1.7K30
    领券