Flutter1.9升級體驗總結（幫你們填坑了）

本文首發在微信公衆號Flutter那些事，未經受權，嚴禁轉載。謝謝合做。

---

今天是一年一度的中秋節，首先在這裏祝願你們中秋團員，闔家歡樂。但願你們吃好喝好玩好。感謝你們這麼長時間一來對本公衆號的大力支持。同時也很是感謝提出寶貴意見的小夥伴們。認識這麼多可愛的小夥伴真的個人榮幸。節日之餘，除了吃好喝好以外，別忘了中止學習，來這裏有最新干貨等着你哦。

在北京時間2019年9月10日的上午，谷歌正式對外公佈了 Flutter1.9版本 ，而後我第一時間就體驗了一把Flutter最新內容，其中也遇到了很多的坑，這裏我寫了一篇博客專門分享給你們，但願你們能夠少走彎路。喜歡的話，就關注一下個人博客吧。

---

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

---

1、切換分支並升級到最新版本

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

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

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

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

3、解決方案

步驟1.運行flutter config --enable-web命令，啓動這個默認命令，來實現Flutter Web支持。

若是是windows，命令以下圖所示：

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

{
  "enable-web": true
}

路徑截圖，以下圖所示：

若是是mac，你只須要運行一次 ~/.flutter_settings 這個命令，若是沒有該文件會自動建立這個文件，而後將如下配置複製到 flutter_settings 文件便可：

{
  "enable-web": true
}

步驟2.運行flutter run -d chrome命令，會自動下載所須要的 Web SDK

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

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

如下是瀏覽器截圖：

總結

1.運行flutter config --enable-web命令

2.執行命令 flutter create . （千萬別忘了後面的點，這是一個大坑。）

3.之後建立任何Flutter項目，只須要執行 flutter run -d chrome 命令便可運行在瀏覽器了。

4、生成release版本的web文件

執行 flutter build web 命令便可把dart文件編譯成html、js、css文件，而後就能夠部署到網站了。

命令行使用以下所示：

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

5、部署到網站

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

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

我發現部署到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文件，而後從新執行命令 flutter build web 便可。

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

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

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

（2）網站頁面

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

演示頁面: https://aweiloveandroid.githu...

GitHub 首頁: https://github.com/AweiLoveAn...

（3）網站頁面示例gif圖形演示

---

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