Flutter1.9升級體驗總結（幫大家填坑了）

本文首發(fā)在微信公眾號Flutter那些事，未經授權，嚴禁轉載。謝謝合作。

Flutter系列博文鏈接 ↓：

工具安裝：

Flutter基礎篇：

Flutter進階篇：

Dart語法系列博文鏈接 ↓：

Dart語法基礎篇：

Dart語法進階篇：

今天是一年一度的中秋節(jié)，首先在這里祝愿大家中秋團員，闔家歡樂。希望大家吃好喝好玩好。感謝大家這么長時間一來對本公眾號的大力支持。同時也非常感謝提出寶貴意見的小伙伴們。認識這么多可愛的小伙伴真的我的榮幸。節(jié)日之余，除了吃好喝好之外，別忘了停止學習，來這里有最新干貨等著你哦。

在北京時間2019年9月10日的上午，谷歌正式對外公布了Flutter1.9版本，然后我第一時間就體驗了一把Flutter最新內容，其中也遇到了不少的坑，這里我寫了一篇博客專門分享給大家，希望大家可以少走彎路。喜歡的話，就關注一下我的博客吧。

首先我這里畫了一張流程圖，放上來讓大家先看看，熟悉一下，幫助大家更快的掌握整個流程。

一、切換分支并升級到最新版本

建議使用master分支。使用 flutter upgrade 命令升級到最新版本。

二、使用命令flutter run -d chrome初次體驗就報錯了。

我新建了一個項目flutter_demo，然后我運行flutter run -d chrome，然而沒反應。

What's the problem？我打開了谷歌瀏覽器，沒有任何反應。

三、解決方案

1、步驟1.運行flutter config --enable-web命令，啟動這個默認命令，來實現(xiàn)Flutter Web支持。

如果是windows，命令如下圖所示：

然后會在電腦的 C:\Users\Administrator\AppData\Roaming 路徑生成 flutter_settings 文件（Administrator是你的電腦名稱）,你可以用文本編輯器打開，內容是這樣的：

{
  "enable-web": true
}

路徑截圖，如下圖所示：

如果是mac，你只需要運行一次 ~/.flutter_settings 這個命令，如果沒有該文件會自動創(chuàng)建這個文件，然后將以下配置復制到 flutter_settings 文件即可：

{
  "enable-web": true
}
2、步驟2.運行flutter run -d chrome命令，會自動下載所需要的 Web SDK

如下圖所示：

3、步驟3.執(zhí)行命令 flutter create . （注：千萬別忘了后面的點，這是一個大坑。)

如下圖所示：

4、步驟4.這時候再運行flutter run -d chrome即可自動把Flutter代碼運行在瀏覽器上面了。

如下圖所示：

以下是瀏覽器截圖：

5、總結
  • 1.運行flutter config --enable-web命令
  • 2.執(zhí)行命令 flutter create . （千萬別忘了后面的點，這是一個大坑。）
  • 3.以后創(chuàng)建任何Flutter項目，只需要執(zhí)行 flutter run -d chrome 命令即可運行在瀏覽器了。

四、生成release版本的web文件

執(zhí)行 flutter build web 命令即可把dart文件編譯成html、js、css文件，然后就可以部署到網站了。

命令行使用如下所示：

編譯生成的web需要的文件在項目的根路徑的build/web里面，如下圖紅色框框所示：

五、部署到網站

（1）部署的時候遇到的坑和解決方案

問題1：部署到網頁怎么也打不開頁面，一直是空白的，僅僅是本地調試的時候是可以運行的。

我發(fā)現(xiàn)部署到GitHub或者外部網站，怎么也打不開網頁，后來我看到了在項目的根路徑的build/web里面，有一個main.dart.js.map的文件。里面引入了本地的flutter_web_sdk目錄的相關文件。然后我就去找對應的文件所在路徑。

◆ 問題一的解決方案：

找到Flutter安裝路徑(例如：我的是 E:/develop/flutter)，然后打開里面的bin/cache/flutter_web_sdk/flutter_web_sdk/，將里面這層 flutter_web_sdk文件夾的所有內容復制到 項目根目錄/build/web里面，然后重新運行 flutter build web 即可。（PS：不知道為啥會有兩層同名文件夾？真是坑大了。。）

具體拷貝哪一個目錄，請看下圖：

問題2： FileSystemException: Deletion failed, path = '.dart_tool/build/flutter_web' (OS Error: 目錄不是空的, errno = 145)

◆ 問題二的解決方案：

刪除項目根目錄的.dart_tools文件，然后重新執(zhí)行命令 flutter build web 即可。

（三）問題3：Flutter Web不支持組件直接跳轉到外部網頁

Flutter里面的Button想要跳轉到網頁，我用的是 url_launcher跳轉到外部網頁，如果使用 flutter build web編譯后的頁面在瀏覽器沒任何效果。

我已經給官方提了 issues，官方工作人員表示會盡快支持并完善該功能，還對我的反饋表示感謝。

六、網站頁面

我們這里只是演示一個計算器的小功能（代碼來源于官方的sample），這里只是把計算器的那個代碼轉換為一個 Flutter Web功能的演示。

演示頁面: https://aweiloveandroid.github.io/flutter_demo/#/

GitHub 首頁: https://github.com/AweiLoveAndroid/AweiLoveAndroid.github.io

七、網站頁面示例gif圖形演示

更多精彩干貨，歡迎關注微信公眾號 Flutter那些事。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容