Flutter入門-環境部署-windows+android studio

真名暱稱用久了,丟了暱稱biu~ 發表於 2020-05-12

前言

寫在前邊,本人是Android開發者,寫這篇文章時如你所見,正準備入坑Flutter。入坑跨平臺的開發不得不考慮蘋果大佬對待Flutter的態度,因為一旦蘋果大佬封殺Flutter的風險變大,入坑Flutter的風險就會很大,到頭來可能只是學會這麼一門曾經的技術而已。 直到看到知乎上的一篇文章Apple 為什麼不封殺 Flutter 呢?(作者:mingyu ye))從某種程度上堅定我的入坑心。 摘要一下知乎的回答: Flutter:

Flutter 與前面說的 RN、Weex、小程式最大的不同就是 Flutter 是一個跨平臺解決方案,而非一個動態化解決方案,Google 的野心很大,想把 Flutter 打造成為新一代的移動端開發標準,在做任何事情時都會考慮合規問題,所以才會在考慮了 iOS 上動態化能力時,依然不考慮支援這個特性,因為一旦 Flutter 在 iOS 上具備了這個能力,也就存在了稽核風險,這個稽核風險是系統性的; 這點要說到國內外開發模式的不同,國外主張加強 CodeReview,國內主張小步快跑,快速迭代,有問題動態更新和熱修復頂上,而蘋果的稽核速度即便一再加快,也難滿足國內各大 App 的快速發版需求,正因為如此一再試探蘋果的稽核邊界,最終在稽核方面造成的問題和風險會逐步抵消掉動態更新和熱修復帶來的好處,當然不同 App 有不同的大環境,未來 App 也一定是朝著更合規的方向去發展; Flutter 目前沒有合規上的風險,因為本身就不是一個動態化解決方案,但一樣秉持不提倡、不承諾不封殺,因為 Flutter 的崛起會吃掉蘋果 App 原生開發人員的份額,蘋果不建議使用官方以外提供的 Native 開發方案,蘋果是絕不能容忍開發人員的大面積消失,一旦這種情況發生,蘋果的生態就會遭人掣肘,這是蘋果爸爸就會出來保護蘋果 App 原生開發人員,這個時候也就是 Flutter 份額降低影響力降低的時刻,蘋果也在不斷推行 Swift 和 SwiftUI 等對原生開發人員更友好的解決方案,力圖抵擋住各跨平臺解決方案對蘋果 App 原生開發人員的蠶食。

言歸正傳

Windows下Flutter環境部署

  • 本文僅適合有程式設計基礎的同學學習檢視,新手僅做參考,不懂就問
1. 映象使用

你懂的,國內大環境下要下個下載這些軟體直接訪問是不現實的,好在國內提供了映象,如果有FQ的也可自行處理 電腦使用者環境變數配置映象路徑。具體步驟

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

手動操作步驟 (1)右鍵開啟我的電腦 (2)點選屬性 (3)開啟高階屬性 (4)使用者屬性分別增加以上兩個環境變數 操作步驟過於簡單,直接上圖

QQ截圖20200512111924.jpg
配置環境變數以後,點選確定(部分帖子介紹需要重啟電腦才能生效)

2. 系統要求

要安裝並執行Flutter,您的開發環境必須滿足以下最低要求:

作業系統: Windows 7 或更高版本 (64-bit) 磁碟空間: 400 MB (不包括Android Studio的磁碟空間). 工具: Flutter 依賴下面這些命令列工具. Git for Windows (Git命令列工具)

如果已安裝Git for Windows,請確保命令提示符或PowerShell中執行 git 命令,不然在後面執行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動新增C:\Program Files\Git\bin至Path系統環境變數中。

3. 獲取Flutter SDk

獲取[獲取Flutter SDK](Flutter SDK) 去flutter官網下載其最新可用的安裝包,點選下載 ;

注意,Flutter的渠道版本會不停變動,請以Flutter官網為準。另外,在中國大陸地區,要想正常獲取安裝包列表或下載安裝包,可能需要FQ,讀者也可以去Flutter github專案下去下載安裝包

將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:C:\src\flutter;注意,不要將flutter安裝到需要一些高許可權的路徑如C:\Program Files\)。

在Flutter安裝目錄的flutter檔案下找到flutter_console.bat,雙擊執行並啟動flutter命令列,接下來,你就可以在Flutter命令列執行flutter命令了。

注意: 由於一些flutter命令需要聯網獲取資料,如果您是在國內訪問,由於眾所周知的原因,直接訪問很可能不會成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國內開發者搭建的臨時映象。詳情請參考 Using Flutter in China

上述命令為當前終端視窗臨時設定PATH變數。要將Flutter永久新增到路徑中,請參閱更新環境變數。 說白了就是配置flutter的環境變數

QQ截圖20200512115413.jpg
要更新現有版本的Flutter,請參閱升級升級Flutter

3. 執行測試

開啟命令還執行 flutter doctor

QQ截圖20200512112713.jpg
注意檢視執行內容,如有報錯會給出對應的 flutter命令進行處理。作者在這個地方並沒有與坑,暫且跳過

4. Android studio與Flutter

作為goole旗下的Flutter和AS。Android studio對Flutter的開發提供了完美的支援。當然這也是作為Android開發者的福音,起碼不需要更換開發工具,浪費時間去適應新工具了。

But AS建議使用最新版本(本人AS3.5.2) 模擬器或者測試真機Android 4.1及以上

AS開發Flutter需要Flutter和Dart外掛這兩位好兄弟來助陣。 外掛的安裝,簡單的介紹兩句安裝步驟 File-setting-Plugin 分別搜尋Flutter和Dart進行外掛安裝

QQ截圖20200512113403.jpg
QQ截圖20200512113417.jpg
安裝完畢重啟AS 小知識點: 完成外掛的安裝以後,需要配置下flutter的sdk
QQ截圖20200512115027.jpg
根據自己實際情況,選擇Flutter的sdk路徑,配置完成以後,AS會自動給Dart也配置上sdk路徑。可以順手的看一下
QQ截圖20200512115258.jpg

5.建立第一個Flutter

以上安裝並部署完成Flutter環境,我們即將與Flutter來一次緊密接觸 新建專案與建立Android專案類似,只是你會發現,安裝了Flutter的AS多了一個New Flutter Project的選項

QQ截圖20200512113726.jpg
一路next 人品好的情況下完成人生第一個Flutter application的建立,連線機器run起來
QQ截圖20200512114622.jpg

下一篇,重點講講執行第一個Flutter過程中爬過的坑

更多精彩請關注我的熊貓卓Sun的部落格