flutter項(xiàng)目中添加web支持

Flutter 2.5.1

成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、徽縣網(wǎng)絡(luò)推廣、微信小程序定制開(kāi)發(fā)、徽縣網(wǎng)絡(luò)營(yíng)銷(xiāo)、徽縣企業(yè)策劃、徽縣品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供徽縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：chinadenli.net

在項(xiàng)目目錄下，在終端運(yùn)行以下命令：

Flutter 中文文檔 - Flutter 中文資源 | 在 Web 中展示圖片

在無(wú)法修改服務(wù)器配置的情況下可以使用html渲染。此外官方文檔中建議，如果顯示的圖片較多，使用html渲染性能更好

webview只支持移動(dòng)端，其它平臺(tái)嘗試打開(kāi)網(wǎng)頁(yè)

webview - web view for flutter web application - Stack Overflow

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

使用 --base-href ，可設(shè)置服務(wù)器子目錄

Flutter dart版本升級(jí)后，使用三目運(yùn)算的坑

當(dāng)前使用的 flutter 版本為 2.5.2 ， dart 的版本為 2.12.0 ： 在給圖片賦值做兼容的時(shí)候，報(bào)錯(cuò)，在使用之前版本( dart?2.7.0 左右)的，可以正常進(jìn)行判斷賦值，我這個(gè)版本如何編譯都不行，查看報(bào)錯(cuò)原因是因?yàn)?類(lèi)型不匹配 導(dǎo)致的，那好，那就改成一樣的類(lèi)型吧，強(qiáng)轉(zhuǎn)的時(shí)候又出問(wèn)題了，死活轉(zhuǎn)的不對(duì)，剛開(kāi)始入門(mén)flutter,還有很多細(xì)節(jié)不知情，原來(lái) dart中強(qiáng)轉(zhuǎn)類(lèi)型 ，使用的 關(guān)鍵字是as， 再三嘗試下，終于改好了，下邊把貼圖放上，共勉~。

Flutter Web打包中文亂碼

flutter web有三種渲染模式，auto 、html 和 canvaskit。

flutter build web命令默認(rèn)的渲染模式為auto，這種模式在移動(dòng)端使用html渲染，在pc端使用canvaskit渲染。

目前我的flutter版本是2.5.2，pc端瀏覽器使用canvaskit渲染時(shí)中文會(huì)出現(xiàn)短暫的亂碼（方塊叉號(hào)），像這樣：

我們可以指定渲染模式為html，就不會(huì)有這個(gè)問(wèn)題了，命令如下：

指定渲染模式為canvaskit的命令為：

2021.10.21：flutter web對(duì)中文的支持貌似不太好，在手機(jī)瀏覽器調(diào)試web項(xiàng)目時(shí)，textfield hinttext有中文輸入會(huì)有卡頓bug

Flutter快速實(shí)現(xiàn)蘋(píng)果賬號(hào)登錄

為了提升用戶(hù)體驗(yàn)，使用三方登錄APP的功能怎么能少呢，但是蘋(píng)果的AppStore有一個(gè)很變態(tài)的要求，接入其他三方登錄的話，要求必須也要接入蘋(píng)果登錄。面對(duì)這么變態(tài)的要求，作為一個(gè)有實(shí)力的碼農(nóng)怎么能拒絕呢！

下面為大家介紹一個(gè)好用的Flutter插件 Sign in With Apple ，可以幫助我們快速的接入蘋(píng)果賬號(hào)功能，插件的英文文檔講的比較詳細(xì)了，英文好的同學(xué)可以直接參閱英文文檔集成。

在項(xiàng)目的 pubspec.yaml 文件中添加sign_in_with_apple插件的依賴(lài)，如果您使用的Flutter SDK 1.x版本請(qǐng)?zhí)砑右蕾?lài)版本 2.5.4 ：

如果您使用的Flutter SDK為2.x，請(qǐng)使用最新版本，當(dāng)前最新版本 3.0.0

使用XCode打開(kāi)項(xiàng)目后，按照以下圖片上的步驟添加 Sign in With Apple Capabilities：

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

Flutter 切換指定版本

查看所有分支和當(dāng)前分支

切換 到指定分支。 例如

查看所有版本

切換 到指定版本。 例如

更新到最新版本

cd到自己的flutter目錄下

執(zhí)行。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 啟動(dòng)頁(yè)的前世今生適配歷程

APP 啟動(dòng)頁(yè)在國(guó)內(nèi)是最常見(jiàn)也是必備的場(chǎng)景，其中啟動(dòng)頁(yè)在 iOS 上算是強(qiáng)制性的要求，其實(shí)配置啟動(dòng)頁(yè)挺簡(jiǎn)單，因?yàn)樵?Flutter 里現(xiàn)在只需要：

一般只要配置無(wú)誤并且圖片尺寸匹配，基本上就不會(huì)有什么問(wèn)題， 那既然這樣，還有什么需要適配的呢？

事實(shí)上大部分時(shí)候 iOS 是不會(huì)有什么問(wèn)題， 因?yàn)? LaunchScreen.storyboard 的流程本就是 iOS 官方用來(lái)做應(yīng)用啟動(dòng)的過(guò)渡；而對(duì)于 Andorid 而言，直到 12 之前 windowBackground 這種其實(shí)只能算“民間”野路子 ，所以對(duì)于 Andorid 來(lái)說(shuō)，這其中就涉及到一個(gè)點(diǎn)：

所以下面主要介紹 Flutter 在 Android 上為了這個(gè)啟動(dòng)圖做了哪些騷操作～

在已經(jīng)忘記版本的“遠(yuǎn)古時(shí)期” ， FlutterActivity 還在 io.flutter.app.FlutterActivity 路徑下的時(shí)候，那時(shí)啟動(dòng)頁(yè)的邏輯相對(duì)簡(jiǎn)單，主要是通過(guò) App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 來(lái)進(jìn)行判斷。

在 FlutterActivity 內(nèi)部 FlutterView 被創(chuàng)建的時(shí)候，會(huì)通過(guò)讀取 meta-data 來(lái)判斷是否需要使用 createLaunchView 邏輯 ：

是不是很簡(jiǎn)單，那就會(huì)有人疑問(wèn)為什么要這樣做？我直接配置 Activity 的 android:windowBackground 不就完成了嗎？

這就是上面提到的時(shí)間差問(wèn)題， 因?yàn)閱?dòng)頁(yè)到 Flutter 渲染完第一幀畫(huà)面中間，會(huì)出現(xiàn)概率出現(xiàn)黑屏的情況，所以才需要這個(gè)行為來(lái)實(shí)現(xiàn)過(guò)渡 。

經(jīng)歷了“遠(yuǎn)古時(shí)代”之后， FlutterActivity 來(lái)到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本發(fā)布之前，F(xiàn)lutter 又針對(duì)這個(gè)啟動(dòng)過(guò)程做了不少調(diào)整和優(yōu)化，其中主要就是 SplashScreen 。

自從開(kāi)始進(jìn)入 embedding 階段后， FlutterActivity 主要用于實(shí)現(xiàn)了一個(gè)叫 Host 的 interface ，其中和我們有關(guān)系的就是 provideSplashScreen 。

默認(rèn)情況下它會(huì)從 AndroidManifest 文件里是否配置了 SplashScreenDrawable 來(lái)進(jìn)行判斷 。

默認(rèn)情況下當(dāng) AndroidManifest 文件里配置了 SplashScreenDrawable ，那么這個(gè) Drawable 就會(huì)在 FlutterActivity 創(chuàng)建 FlutterView 時(shí)被構(gòu)建成 DrawableSplashScreen 。

DrawableSplashScreen 其實(shí)就是一個(gè)實(shí)現(xiàn)了 io.flutter.embedding.android.SplashScreen 接口的類(lèi)，它的作用就是：

之后 FlutterActivity 內(nèi)會(huì)創(chuàng)建出 FlutterSplashView ，它是個(gè) FrameLayout。

FlutterSplashView 將 FlutterView 和 ImageView 添加到一起， 然后通過(guò) transitionToFlutter 的方法來(lái)執(zhí)行動(dòng)畫(huà)，最后動(dòng)畫(huà)結(jié)束時(shí)通過(guò) onTransitionComplete 移除 splashScreenView 。

所以整體邏輯就是：

當(dāng)然這里也是分狀態(tài)：

當(dāng)然這個(gè)階段的 FlutterActivity 也可以通過(guò) override provideSplashScreen 方法來(lái)自定義 SplashScreen 。

看到?jīng)]有，做了這么多其實(shí)也就是為了彌補(bǔ)啟動(dòng)頁(yè)和 Flutter 渲染之間， 另外還有一個(gè)優(yōu)化，叫 NormalTheme 。

通過(guò)該配置 NormalTheme ，在 Activity 啟動(dòng)時(shí)，就會(huì)首先執(zhí)行 switchLaunchThemeForNormalTheme(); 方法將主題從 LaunchTheme 切換到 NormalTheme 。

大概配置完就是如下樣子， 前面分析那么多其實(shí)就是為了告訴你，如果出現(xiàn)問(wèn)題了，你可以從哪個(gè)地方去找到對(duì)應(yīng)的點(diǎn) 。

講了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被棄用了，驚不喜驚喜，意不意外，開(kāi)不開(kāi)心 ？

通過(guò)源碼你會(huì)發(fā)現(xiàn)，當(dāng)你設(shè)置了 splashScreen 的時(shí)候，會(huì)看到一個(gè) log 警告：

為什么會(huì)棄用？

其實(shí)這個(gè)提議是在 這個(gè) issue 上，然后通過(guò) 這個(gè) pr 完成調(diào)整。

大概意思就是： 原本的設(shè)計(jì)搞復(fù)雜了，用 OnPreDrawListener 更精準(zhǔn)，而且不需要為了后面 Andorid12 的啟動(dòng)支持做其他兼容，只需要給 FlutterActivity 等類(lèi)增加接口開(kāi)關(guān)即可 。

也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 來(lái)實(shí)現(xiàn)延遲直到加載出 Flutter 的第一幀。

為什么說(shuō)默認(rèn)情況？ 因?yàn)檫@個(gè)行為在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才會(huì)被調(diào)用，而 RenderMode 又和 BackgroundMode 有關(guān)心 。

所以在 2.5 版本后， FlutterActivity 內(nèi)部創(chuàng)建完 FlutterView 后就會(huì)執(zhí)行一個(gè) delayFirstAndroidViewDraw 的操作。

這里主要注意一個(gè)參數(shù)： isFlutterUiDisplayed 。

當(dāng) Flutter 被完成展示的時(shí)候， isFlutterUiDisplayed 就會(huì)被設(shè)置為 true。

所以當(dāng) Flutter 沒(méi)有執(zhí)行完成之前， FlutterView 的 onPreDraw 就會(huì)一直返回 false ，這也是 Flutter 2.5 開(kāi)始之后適配啟動(dòng)頁(yè)的新調(diào)整。

看了這么多，大概可以看到其實(shí)開(kāi)源項(xiàng)目的推進(jìn)并不是一帆風(fēng)順的，沒(méi)有什么是一開(kāi)始就是最優(yōu)解，而是經(jīng)過(guò)多方嘗試和交流，才有了現(xiàn)在的版本，事實(shí)上開(kāi)源項(xiàng)目里，類(lèi)似這樣的經(jīng)歷數(shù)不勝數(shù)：

當(dāng)前名稱(chēng)：flutter2.5,flutter140
文章源于：http://chinadenli.net/article44/dsgpsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)