本文由 愛學(xué)園平臺(tái) 進(jìn)行聯(lián)合編輯整理輸出

原作者：愛學(xué)園——莫比烏斯環(huán)

雖說Flutter出現(xiàn)有一段時(shí)間了，但大家對它的了解卻不是很深，但直到2018谷歌開發(fā)者大會(huì)在上海的召開，它才真正進(jìn)入開發(fā)者的世界。Flutter的出現(xiàn)為跨平臺(tái)開發(fā)開辟了新的方向，但是與之相應(yīng)的中文學(xué)習(xí)文檔卻不是很多，因此針對這一考慮我們會(huì)持續(xù)輸出一系列Flutter方面的實(shí)踐性學(xué)習(xí)文檔以及配套demo供大家學(xué)習(xí)。萬里之行始于足下，下面我們就開始Flutter入坑的第一篇——Flutter開發(fā)環(huán)境搭建。

Flutter 安裝

關(guān)于Flutter的安裝，本文以 macOS 系統(tǒng)為例，就 macOS 系統(tǒng)下Flutter的安裝細(xì)節(jié)進(jìn)行說明。其它平臺(tái)（Windowns、Linux）可參考官方文檔安裝步驟。

自備梯子或使用國內(nèi)鏡像

做過開發(fā)的都曉得，國內(nèi)訪問Google是不行的，因此此處我們需要做一些前期配置，擁有梯子的可自行跳過。沒有梯子的同志也不用擔(dān)心，F(xiàn)lutter官方并不會(huì)放棄我們這么重要的用戶，他們專門為中國開發(fā)者搭建了臨時(shí)鏡像，大家可以將環(huán)境變量加入到當(dāng)前用戶環(huán)境中，具體操作如下：

export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

這里的配置僅限當(dāng)前窗口使用，如果需要永久使用請參考后面小節(jié)更新環(huán)境變量配置
注意：此鏡像為臨時(shí)鏡像，并不能保證一直可用，讀者可以關(guān)注Using Flutter in China以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。

獲取Flutter SDK

獲取 Flutter 有多種方式：

1. 去Flutter官網(wǎng)下載穩(wěn)定可用的安裝包，轉(zhuǎn)到下載頁
2. 第一種方式可能需要翻墻，也可直接從Github上Flutter項(xiàng)目下去下載安裝包，轉(zhuǎn)到下載頁。對應(yīng)指令git clone -b dev https://github.com/flutter/flutter.git(可針對當(dāng)前版本做命令的調(diào)整)

上述兩種第一種需要解壓，第二種不需要，總之將它們放置到您想放到的地方

更新環(huán)境變量

大家都知道此時(shí)flutter還不是全局變量，為了方便我們以后的調(diào)用，這里我們需要做一些全局性的配置，具體命令如下：

export PATH= ~/developer/flutter/bin:$PATH //flutter 存放位置，替換為您自己的即可 export ANDROID_HOME="~/Library/Android/sdk" //android sdk目錄，替換為您自己的即可 export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

打開（或創(chuàng)建）~/.bash_profile文件,將下面的命令粘貼進(jìn)去,注意：此處Flutter與Android SDK的路徑需要替換為自己的，保存之后運(yùn)行source $~/.bash_profile刷新當(dāng)前終端窗口。

運(yùn)行 flutter doctor

經(jīng)過上面的步驟，此時(shí)我們就可以運(yùn)行以下命令查看是否需要安裝其它依賴項(xiàng)來完成安裝，這個(gè)過程第一次可能需要耗費(fèi)一段時(shí)間，下次就會(huì)快很多：

flutter doctor 

該命令依賴檢查您的環(huán)境并在終端窗口顯示報(bào)告。如下是我運(yùn)行輸出的結(jié)果：

運(yùn)行異常情況：

[-] Android toolchain - develop for Android devices ? Android SDK at /Users/obiwan/Library/Android/sdk ? Android SDK is missing command line tools; download from https://goo.gl/XxQghQ ? Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions. 

一般的錯(cuò)誤會(huì)是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。

運(yùn)行正常情況：

flutter-doctor-result
這里我們只關(guān)注紅色方框內(nèi)的，這里有四部分下面逐一解釋（Android，先不考慮IOS情況，處理一致）：

• 第一部分監(jiān)測的是Flutter相關(guān)依賴項(xiàng)結(jié)果，如果第一次運(yùn)行會(huì)先去下載；
• 第二部分針對Android SDK和Java方面的檢測，如果缺失，對應(yīng)條目前方會(huì)顯示?紅色標(biāo)記，那就需要您根據(jù)缺失條目提示進(jìn)行配置，這里不做深入；
• 第三部分針對編譯器（Android Studio）內(nèi)部插件（Flutter、Dart）的安裝檢測，插件的安裝將會(huì)在下一章節(jié)詳細(xì)講解；
• 第四部分是對連接設(shè)備的檢測，我這里沒有啟動(dòng)設(shè)備，則顯示無可用設(shè)備。

編譯器Flutter插件安裝

適合Flutter使用的編譯器有很多（IDE、VSCode、Xcode），這里我以Android Studio為例演示下如何安裝Flutter相關(guān)插件（注意：這里Android Studio需要 3.0或更高版本）：

1. 首先啟動(dòng)Android Studio，打開插件首選項(xiàng)(Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)；
2. 選擇 Browse repositories…, 選擇 Flutter 插件并點(diǎn)擊 install（此處Dart插件回一起安裝）；
3. 重啟Android Studio后插件生效；

體驗(yàn)Flutter

經(jīng)過上面的步驟，F(xiàn)lutter需要的相關(guān)環(huán)境基本已經(jīng)配置完畢，下面我們就創(chuàng)建一個(gè)工程實(shí)踐下，我們的配置是否可行：

創(chuàng)建應(yīng)用

1. 打開Android Studio 選擇File>New Flutter Project
2. 選擇Flutter application作為project類型，然后點(diǎn)擊Next
3. 輸入項(xiàng)目名稱（如myapp），然后點(diǎn)擊Next
4. 點(diǎn)擊Finish
5. 創(chuàng)建完成

下面請看默認(rèn)Flutter工程的目錄結(jié)構(gòu)：

目錄結(jié)構(gòu)
在項(xiàng)目目錄中，您應(yīng)用程序的代碼位于 lib/main.dart.

運(yùn)行

工具欄
點(diǎn)擊上述綠色三角執(zhí)行程序，您有可能遇到一些異常現(xiàn)象比如：dart not support 或 flutter not found sdk 等等，那么你就得查看下如下兩處地方是否配置正確：
開啟Dart支持:

dart支持
Flutter SDK路徑配置:

SDK配置
然后再次運(yùn)行,即日志界面的執(zhí)行過程如下：

日志分析
查看模擬器運(yùn)行結(jié)果--HelloWorld：

Demo

到此說明我們的開發(fā)環(huán)境安裝正確，但不代表您們也會(huì)這么順利，畢竟每個(gè)人都電腦環(huán)境不一致，如遇到問題可給我留言，我們一起探討，～謝謝～！

注釋：下一篇我們將會(huì)帶領(lǐng)您如何一步步創(chuàng)建我們第一個(gè)Flutter應(yīng)用與相關(guān)代碼結(jié)構(gòu)分析

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/18165.html