前言 使用flutter开发web页面，在pc端使用就会面临刷新的问题。尤其是刷新时，本地变量清空导致页面问题，所以就需要考虑全局缓存的问题。...同时，如果我们通过static变量来存储一些全局的信息，在刷新时同样会被清空，也会导致问题。...所以说存储在内存中的都不安全，很明显浏览器的刷新动作会清空所有内存数据，所以如果部分信息希望在刷新后依然留存，则需要通过一些方法将其持久化。...对于这个问题很多人也在github的flutter项目中反馈 https://github.com/flutter/flutter/issues/59277 正式的解决方案是使用Navigator2.0...目前来看google的对flutter web的意图，还是开发移动web并在App中通过webkit这种内核使用，并没有想开发者使用flutter web来开发真正的web应用，或者后续会完善这部分。
示例 我们直接到 flutter_github中找个简单的实例。...我这里以flutter_github中的WebViePage为例。...在Flutter中也有类似的传参方式。我们可以通过MaterialPageRoute中的settings来构建一个arguments对象，将其传递到跳转的页面中。...如果不记得的话推荐重新温习一遍从零开始的Flutter之旅: InheritedWidget 以上都是非命名路由，下面我们再来了解一下命名路由的使用与参数方式。...以flutter_github中的GithubApp为例。
哔哩哔哩漫画APP实践Flutter 也有大半年时间了，我针对线上收集到的错误进行分析，挑选出了一些有一般代表性的错误，列在本文，可供实践 Flutter 的初学者们作为一点参考。...示例代码 在某个方法里获取网络数据，为了更好的提示用户，会先弹一个 loading 窗，之后再根据数据执行别的操作... // show loading dialog on request data showDialog...示例代码 这种错误，较常发生在使用服务端返回的数据model时。...示例代码 这种错误，也较常发生在使用服务端返回的数据model时。...const {}); } 总结 综上所述，这些典型错误，都不是什么疑难杂症，而是不理解或者不熟悉 Flutter 和 Dart 语言所导致的，关键是要学会容错处理。
注意：使用的 Flutter 版本 和 Dart 版本如下： Flutter 1.22.4 • channel stable • https://github.com/flutter/flutter.git...但构造函数并不是生命周期的一部分。...，但下面的错误代码大部分应该都写过： @override void initState() { super.initState(); showDialog(context: context,builder...didChangeDependencies 中调用也会出现异常，但和上面的异常不是同一个。...因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 showDialog showDialog 用于弹出Material...如果应用程序有多个Navigator，关闭对话框需要使用 Navigator.of(context, rootNavigator: true).pop(result) 而不是 Navigator.pop...下面的2个按钮根据应用程序支持的语言显示相应的语言，比如显示中文方法如下： 在pubspec.yaml中配置支持国际化： dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域： MaterialApp( title: 'Flutter Demo...，调用showBottomSheet抛出异常。
❝注意：使用的 Flutter 版本 和 Dart 版本如下： Flutter 1.22.4 • channel stable • https://github.com/flutter/flutter.git...，但下面的错误代码大部分应该都写过： @override void initState() { super.initState(); showDialog(context: context,builder...didChangeDependencies 中调用也会出现异常，但和上面的异常不是同一个。...因为如果当前组件未插入到树中或者已经从树中移除时，调用 「setState」 会抛出异常，加上 「mounted」 判断，则表示当前组件在树中。...onResume」 中的功能，用 didChangeAppLifecycleState 是无法实现此功能的，didChangeAppLifecycleState 是对应于整个应用程序的，而不是 Flutter
[1240] 注意：无特殊说明，Flutter版本及Dart版本如下：Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 showDialog showDialog 用于弹出...如果应用程序有多个Navigator，关闭对话框需要使用 Navigator.of(context, rootNavigator: true).pop(result) 而不是 Navigator.pop...下面的2个按钮根据应用程序支持的语言显示相应的语言，比如显示中文方法如下： 在pubspec.yaml中配置支持国际化： dependencies: flutter: sdk: flutter...flutter_localizations: sdk: flutter 在MaterialApp中配置当前区域： MaterialApp( title: 'Flutter Demo...，调用showBottomSheet抛出异常。
基本接入 1.1 环境配置 和尚在接入 Flutter TPNS 时，需要在 Flutter 和 Android 两端进行插件的安装配置； Flutter 在工程 pubspec.yaml...中 dependencies 下引入 tpns_flutter_plugin 插件； dependencies: flutter: sdk: flutter tpns_flutter_plugin...上报角标数 对于桌面角标，在通知类消息中 华为 和 小米 设备在开启权限之后，接收通知会由桌面角标的更新；而 TPNS 提供的 setBadge() 只有在 iOS 环境下支持，对于 Android...3.4 注意事项 和尚在 PendingIntent 中传递的页面依旧是 MainActivity，可以根据具体的业务逻辑启动专门的中转页面；其中使用 MainActivity 时需要，因为设置了...Flutter TPNS 中很多高级方法还未做尝试，仅实现最基本的通知类和透传类 Push 的接收展示点击等；如有错误请多多指导！
歌词（二））8.Flutter实战 | 从 0 搭建「网易云音乐」APP（八、我的页面） 本篇为第九篇，在这里我们会搭建「搜索页面、底部播放控制栏」。...具体UI上面就不说了，有一个需要注意的地方就是： 在综合页面需要跳转别的页面，这里我使用的是在创建「综合」页面的时候传入点击事件，然后在点击的时候调用： SearchMultipleResultPage...不是我装x，是真的简单，听我说！...so，控制栏逻辑如下： 1.在播放的时候保存当前歌曲列表和当前 index 到本地2.在重新打开 APP 的时候点击播放可以播放上次播放的歌曲 第一个保存，很简单了，使用 shared_preferences...写好以后在需要使用的页面加上就行了。
探索 起初，我也在pub上找到了几个比较优秀的插件： FlutterToast: 这个插件应该是很多刚入坑Flutter的同学们都使用过的，它依赖于原生，但对于UI层级的问题，最好在Flutter端解决...对象的build方法中，另一个是State的成员变量 有关BuildContext更深入的探讨不在此文的探讨范围内，如果使用showDialog实现弹窗操作，那么我们所考虑的问题便是，如何方便快捷的在任意地方去获取...如果有同学恰巧也用了showDialog这种方式的话，我相信，你也会发现，在任意地方获取BuildContext并不是那么简单，而且会产生很多不必要的代码量。...那么，我们就只能使用这种体验极其不友好的方法么？ 当然不是的，请继续看。...好在类中提供了重写shouldRepaint的方法，这个方法决定了画布什么时候会重新绘制，在复杂的绘制中对提升绘制性能是相当有成效的。
本篇文章中，我们就通过编写一个简单的 Flutter 来了解他的开发流程。 这里我们要开发的 demo 很简单，只是在屏幕中间放一个按钮，点击的时候，模拟摇两个骰子并弹窗显示结果。...cd flutter_demo git checkout first_app_step1 由于是第一次写 Flutter 应用，我们对上面的代码是否能够按照预期执行还不是那么有信心，所以我们先打个 log...确认一下，点击按钮后是不是真的会执行 onPress。...虽然现在 Flutter 提供的 log 工具比较简陋，可以预期未来还会进一步完善。 使用打 log 的方式，好处在于不会对执行流程产生较大的影响，在多线程环境尤为有用。...在什么时候使用什么方法，需要一些经验；但有时候就全凭个人喜好了，没有优劣之分。 更多的调试方法，读者可以根据需要查看flutter.io/debugging/进一步学习。
一、页面的生命周期 在Flutter开发中，所有的组件和页面都继承自Widget，所以探索页面的生命周期其实就是Widget的生命周期。...和Android的Activity和iOS的Controller一样，在Widget中，也有对应生命周期的一些方法函数。当进行到某一阶段时，会自动回调对应的方法函数。...，但下面的错误代码大部分应该都写过： @override void initState() { super.initState(); showDialog(context: context,builder...因为如果当前组件未插入到树中或者已经从树中移除时，调用 setState 会抛出异常，加上 mounted 判断，则表示当前组件在树中。...中 onResume 中的功能，用 didChangeAppLifecycleState 是无法实现此功能的，didChangeAppLifecycleState 是对应于整个应用程序的，而不是 Flutter
基本接入 1.1 环境配置 和尚在接入 Flutter TPNS 时，需要在 Flutter 和 Android 两端进行插件的安装配置； Flutter 在工程 pubspec.yaml...中 dependencies 下引入 tpns_flutter_plugin 插件； dependencies: flutter: sdk: flutter tpns_flutter_plugin...上报角标数 对于桌面角标，在通知类消息中 华为 和 小米 设备在开启权限之后，接收通知会由桌面角标的更新；而 TPNS 提供的 setBadge() 只有在 iOS 环境下支持，对于 Android...展示 Flutter 端在接收到 透传类 Push 消息时，发送 MethodChannel 到 Android Native，Native 端在解析对应参数进行 Notification 展示...Flutter TPNS 中很多高级方法还未做尝试，仅实现最基本的通知类和透传类 Push 的接收展示点击等；如有错误请多多指导！
一年一度的谷歌大会又开始了，谷歌对 Flutter 的投入力度又加大了，所以更得好好学 Flutter 了。...和尚在做新闻列表方面的 Demo 时，想到会在列表中展示多种不同 item 样式，今天特意借助上一篇关于 ListView 的小例子 稍微调整一下，测试 ListView 中多种 item 样式展示方式...和尚编辑了一个 stateItems 有 0，1，2 三种样式类型，但是在 buildListData 中只判断了 1 和 2 两种，和尚以为会隐藏掉当前 item，可结果出乎意料，在 0 及以后的 item...时针对具体的 Widget，例如对 item 进行点击操作时，对整个 item 外添加 GestureDetector，和尚当时糊涂把 GestureDetector 添加错 Widget 以为使用方式有问题...Widget 显隐性 和尚在实际测试的过程中需要用到【Widget 显隐性】，和尚想 Flutter 最大的特点就是一切都是 Widget，同时 Widget 不可为 null(错误：Widget
前面的小节把常用的一些部件都介绍了，这节介绍下 Flutter 中的一些操作提示。...Flutter 中的操作提示主要有这么几种 SnackBar、BottomSheet、Dialog，因为 Dialog 样式比较多，放最后讲好了 SnackBar SnackBar 的源码相对简单 const...Dialog 相对于 SnackBar 和 BottomSheet，Dialog 的使用场景相对会更多，在 MaterialDesign 下，Dialog 主要有 3 种：AlertDialog，SimpleDialog...AlertDialog 在 ListView 中增加一个 AlertDialog 的按钮，用于点击显示 AlertDialog 用，然后加入显示 AlertDilaog 的方法，并将按钮的 onPressed...AboutDialog 会自带两个按钮 VIEW LICENSES 和 CLOSE，VIEW LICENSES 会跳转一个 Flutter Licenses 的网页，CLOSE 会关闭，至于为什么是英文的
在前面的文章中我们学习了Flutter中输入以及选择控件的用法，借助于这些组件大家可以完成很多常用的功能，但是他不能及时在用户操作后完成相应的界面提示，所以今天我们就会来看下Flutter中的操作提示。...在上篇文章中我们介绍了CheckBoxListTitle的用法，关于RadioListTitle和SwitchListTitle的用法法并没有介绍，因为真的很简单，所以还是直接看下下面的代码吧。...在原生客户端有着几种常用的用户提醒方式，如Dialog、Snackbar、BottomSheet等，今天我们就来介绍下Flutter中几种常用的提醒方式。...在Flutter中你可以使用ShowDialog方法来显示这些Dialog。...小结 ---- SnackBar可以快捷的在底部显示提示Tips 使用showAlert方法可以显示SimpleDialog、AlertDialog和AboutDialog 使用BottomSheet可以实现底部抽屉的效果
在Flutter现有的状态管理技术中，该模式在很大程度上依赖于 BLoCs ，并且非常类似于 RxVMS 架构。...3.抛出一个异常，调用的代码可以通过try/catch捕获它，并在需要时展示一个警告。 稍后，我们将看到一个完整的例子，说明它在实践中的用处。...数据层/BLoC中的行为 1.BLoC应该是纯Dart的——没有UI代码，没有导入Flutter相关类和文件，也没有在BLoC中使用BuildContext。...然而，对于仅使用接收器和流的“严格”版本的BLoC，这是不可能的。仅供参考，在Redux中实现这样的功能…嗯…并不是那么有趣！...当Flutter重建窗口控件树时，处理嵌套的StreamBuilders会导致调试过程变得很棘手。 这些因素都会让代码有额外的开销。
在Flutter中，各种提示框、弹出框是如何实现的呢？今天我们就来聊一聊这个问题。 首先咱们来聊聊Flutter系统内置的Dialog。...Flutter系统内置的Dialog 关于Flutter系统内置的Dialog，我们可以从两个层面去讨论，一个是showDialog层面，一个是showModalBottomSheet层面。...}, ) ], ); }); //在这里根据result值来进行判断、处理各种事件 print(result); } 在删除列表中的某一个项目的时候...showModalBottomSheet 前面我们讲了通过showDialog来弹出提示框，通过showDialog弹出的提示框都是在页面的中间。接下来我们看看如何从页面底部弹出一个Sheet。...此时我们可以使用定时器，代码如下： //自定义Dialog import 'dart:async'; import 'package:flutter/material.dart'; //自定义Dialog
这里onTap会调用一个showDialog来弹出一个对话框，运行之后结果如下： 会动的组件 在上面的例子中，我们用手去tap按钮是没有互动效果的，也就是说按钮是不会变化的。...答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。 那么InkWell和GestureDetector有什么联系呢？...在使用上，InkWell和GestureDetector也很类似，我们可以完全照搬GestureDetector的用法。...可删除的组件 在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？...为了演示方便，我们使用ListView来展示如何使用Dismissible。
答案是肯定的，flutter为我们提供了一个InkWell组件，这样手指按压下组件会产生波纹的效果。那么InkWell和GestureDetector有什么联系呢？...在使用上，InkWell和GestureDetector也很类似，我们可以完全照搬GestureDetector的用法。...可删除的组件在app中的手势应用上，有一个比较常见的用法就是在list列表中，向左滑动一个item，会出现删除的按钮，这种滑动删除的效果，如何在flutter中实现呢？...flutter提供了一个Dismissible的组件来实现这个效果。...为了演示方便，我们使用ListView来展示如何使用Dismissible。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
