189 8069 5689

flutter2.5,flutter140

flutter项目中添加web支持

Flutter 2.5.1

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计、成都网站设计、徽县网络推广、微信小程序定制开发、徽县网络营销、徽县企业策划、徽县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供徽县建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com

在项目目录下,在终端运行以下命令:

Flutter 中文文档 - Flutter 中文资源 | 在 Web 中展示图片

在无法修改服务器配置的情况下可以使用html渲染。此外官方文档中建议,如果显示的图片较多,使用html渲染性能更好

webview只支持移动端,其它平台尝试打开网页

webview - web view for flutter web application - Stack Overflow

使用 package_info_plus | Flutter Package (pub.dev) 替换package_info

使用 --base-href ,可设置服务器子目录

Flutter dart版本升级后,使用三目运算的坑

当前使用的 flutter 版本为 2.5.2 , dart 的版本为 2.12.0 : 在给图片赋值做兼容的时候,报错,在使用之前版本( dart 2.7.0 左右)的,可以正常进行判断赋值,我这个版本如何编译都不行,查看报错原因是因为 类型不匹配 导致的,那好,那就改成一样的类型吧,强转的时候又出问题了,死活转的不对,刚开始入门flutter,还有很多细节不知情,原来 dart中强转类型 ,使用的 关键字是as, 再三尝试下,终于改好了,下边把贴图放上,共勉~。

Flutter Web打包中文乱码

flutter web有三种渲染模式,auto 、html 和 canvaskit。

flutter build web命令默认的渲染模式为auto,这种模式在移动端使用html渲染,在pc端使用canvaskit渲染。

目前我的flutter版本是2.5.2,pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码(方块叉号),像这样:

我们可以指定渲染模式为html,就不会有这个问题了,命令如下:

指定渲染模式为canvaskit的命令为:

2021.10.21:flutter web对中文的支持貌似不太好,在手机浏览器调试web项目时,textfield hinttext有中文输入会有卡顿bug

Flutter快速实现苹果账号登录

为了提升用户体验,使用三方登录APP的功能怎么能少呢,但是苹果的AppStore有一个很变态的要求,接入其他三方登录的话,要求必须也要接入苹果登录。面对这么变态的要求,作为一个有实力的码农怎么能拒绝呢!

下面为大家介绍一个好用的Flutter插件 Sign in With Apple ,可以帮助我们快速的接入苹果账号功能,插件的英文文档讲的比较详细了,英文好的同学可以直接参阅英文文档集成。

在项目的 pubspec.yaml 文件中添加sign_in_with_apple插件的依赖,如果您使用的Flutter SDK 1.x版本请添加依赖版本 2.5.4 :

如果您使用的Flutter SDK为2.x,请使用最新版本,当前最新版本 3.0.0

使用XCode打开项目后,按照以下图片上的步骤添加 Sign in With Apple Capabilities:

成功添加 Sign in With Apple能力后,可以在下面的列表中就代表添加成功了,如下图:

Flutter 切换指定版本

查看所有分支和当前分支

切换 到指定分支。 例如

查看所有版本

切换 到指定版本。 例如

更新到最新版本

cd到自己的flutter目录下

执行。git reset --hard id

这是1.20.4的id

git reset --hard fba99f6cf9a14512e461e3122c8ddfaa25394e89

这是2.5.1的id

git reset --hard ffb2ecea5223acdd139a5039be2f9c796962833d

这是1.22.4的id

git reset --hard 1aafb3a8b9b0c36241c5f5b34ee914770f015818

这是1.22.3的id

git reset --hard 8874f21e79d7ec66d0457c7ab338348e31b17f1d

flutter git地址

找commit id 的手顺

Flutter 启动页的前世今生适配历程

APP 启动页在国内是最常见也是必备的场景,其中启动页在 iOS 上算是强制性的要求,其实配置启动页挺简单,因为在 Flutter 里现在只需要:

一般只要配置无误并且图片尺寸匹配,基本上就不会有什么问题, 那既然这样,还有什么需要适配的呢?

事实上大部分时候 iOS 是不会有什么问题, 因为 LaunchScreen.storyboard 的流程本就是 iOS 官方用来做应用启动的过渡;而对于 Andorid 而言,直到 12 之前 windowBackground 这种其实只能算“民间”野路子 ,所以对于 Andorid 来说,这其中就涉及到一个点:

所以下面主要介绍 Flutter 在 Android 上为了这个启动图做了哪些骚操作~

在已经忘记版本的“远古时期” , FlutterActivity 还在 io.flutter.app.FlutterActivity 路径下的时候,那时启动页的逻辑相对简单,主要是通过 App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 来进行判断。

在 FlutterActivity 内部 FlutterView 被创建的时候,会通过读取 meta-data 来判断是否需要使用 createLaunchView 逻辑 :

是不是很简单,那就会有人疑问为什么要这样做?我直接配置 Activity 的 android:windowBackground 不就完成了吗?

这就是上面提到的时间差问题, 因为启动页到 Flutter 渲染完第一帧画面中间,会出现概率出现黑屏的情况,所以才需要这个行为来实现过渡 。

经历了“远古时代”之后, FlutterActivity 来到了 io.flutter.embedding.android.FlutterActivity , 在到 2.5 版本发布之前,Flutter 又针对这个启动过程做了不少调整和优化,其中主要就是 SplashScreen 。

自从开始进入 embedding 阶段后, FlutterActivity 主要用于实现了一个叫 Host 的 interface ,其中和我们有关系的就是 provideSplashScreen 。

默认情况下它会从 AndroidManifest 文件里是否配置了 SplashScreenDrawable 来进行判断 。

默认情况下当 AndroidManifest 文件里配置了 SplashScreenDrawable ,那么这个 Drawable 就会在 FlutterActivity 创建 FlutterView 时被构建成 DrawableSplashScreen 。

DrawableSplashScreen 其实就是一个实现了 io.flutter.embedding.android.SplashScreen 接口的类,它的作用就是:

之后 FlutterActivity 内会创建出 FlutterSplashView ,它是个 FrameLayout。

FlutterSplashView 将 FlutterView 和 ImageView 添加到一起, 然后通过 transitionToFlutter 的方法来执行动画,最后动画结束时通过 onTransitionComplete 移除 splashScreenView 。

所以整体逻辑就是:

当然这里也是分状态:

当然这个阶段的 FlutterActivity 也可以通过 override provideSplashScreen 方法来自定义 SplashScreen 。

看到没有,做了这么多其实也就是为了弥补启动页和 Flutter 渲染之间, 另外还有一个优化,叫 NormalTheme 。

通过该配置 NormalTheme ,在 Activity 启动时,就会首先执行 switchLaunchThemeForNormalTheme(); 方法将主题从 LaunchTheme 切换到 NormalTheme 。

大概配置完就是如下样子, 前面分析那么多其实就是为了告诉你,如果出现问题了,你可以从哪个地方去找到对应的点 。

讲了那么多, Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被弃用了,惊不喜惊喜,意不意外,开不开心 ?

通过源码你会发现,当你设置了 splashScreen 的时候,会看到一个 log 警告:

为什么会弃用?

其实这个提议是在 这个 issue 上,然后通过 这个 pr 完成调整。

大概意思就是: 原本的设计搞复杂了,用 OnPreDrawListener 更精准,而且不需要为了后面 Andorid12 的启动支持做其他兼容,只需要给 FlutterActivity 等类增加接口开关即可 。

也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 来实现延迟直到加载出 Flutter 的第一帧。

为什么说默认情况? 因为这个行为在 FlutterActivity 里,是在 getRenderMode() == RenderMode.surface 才会被调用,而 RenderMode 又和 BackgroundMode 有关心 。

所以在 2.5 版本后, FlutterActivity 内部创建完 FlutterView 后就会执行一个 delayFirstAndroidViewDraw 的操作。

这里主要注意一个参数: isFlutterUiDisplayed 。

当 Flutter 被完成展示的时候, isFlutterUiDisplayed 就会被设置为 true。

所以当 Flutter 没有执行完成之前, FlutterView 的 onPreDraw 就会一直返回 false ,这也是 Flutter 2.5 开始之后适配启动页的新调整。

看了这么多,大概可以看到其实开源项目的推进并不是一帆风顺的,没有什么是一开始就是最优解,而是经过多方尝试和交流,才有了现在的版本,事实上开源项目里,类似这样的经历数不胜数:


本文题目:flutter2.5,flutter140
标题URL:http://jkwzsj.com/article/dsgpsee.html

其他资讯