搭建Flutter開發(fā)環(huán)境 2019-03-18

標(biāo)簽(空格分隔): Flutter Dart


由于Flutter會(huì)同時(shí)構(gòu)建Android和IOS兩個(gè)平臺(tái)的發(fā)布包,所以Flutter同時(shí)依賴Android SDK和iOS SDK,在安裝Flutter時(shí)也需要安裝相應(yīng)平臺(tái)的構(gòu)建工具和SDK。


使用鏡像

由于在國(guó)內(nèi)訪問Flutter有時(shí)可能會(huì)受到限制,F(xiàn)lutter官方為中國(guó)開發(fā)者搭建了臨時(shí)鏡像,大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中:

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

注意: 此鏡像為臨時(shí)鏡像,并不能保證一直可用,讀者可以參考https://flutter.io/community/china以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。

在Windows上搭建Flutter開發(fā)環(huán)境

請(qǐng)確??梢栽诿钐崾痉騊owerShell中運(yùn)行 git 命令

獲取Flutter SDK

  1. 去flutter官網(wǎng)下載其最新穩(wěn)定版的安裝包,官網(wǎng)地址:https://flutter.io/sdk-archive/#windows,也可以去Flutter github項(xiàng)目下去下載安裝包,地址:https://github.com/flutter/flutter/releases 。
  2. 將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:C:\src\flutter;注意,不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\)。
  3. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat,雙擊運(yùn)行并啟動(dòng)flutter命令行,接下來,你就可以在Flutter命令行運(yùn)行flutter命令了。

更新環(huán)境變量

如果你想在Windows系統(tǒng)自帶命令行(而不是)運(yùn)行flutter命令,需要添加flutter\bin 的全路徑到用戶PATH環(huán)境變量。

運(yùn)行 flutter doctor命令

在Flutter命令行運(yùn)行如下命令來查看是否還需要安裝其它依賴,如果需要,安裝它們:

flutter doctor

該命令檢查你的環(huán)境并在命令行窗口中顯示報(bào)告。Dart SDK已經(jīng)在打包在Flutter SDK里了,沒有必要單獨(dú)安裝Dart。仔細(xì)檢查命令行輸出以獲取可能需要安裝的其他軟件或進(jìn)一步需要執(zhí)行的任務(wù)。

Android設(shè)置

Flutter依賴于Android Studio的全量安裝。Android Studio不僅可以管理Android 平臺(tái)依賴、SDK版本等,而且它也是Flutter開發(fā)推薦的IDE之一。

安裝Android Studio

下載并安裝 Android Studio,下載地址:https://developer.android.com/studio/index.html 。安裝參見https://www.zybuluo.com/nextleaf/note/1429456

在macOS上搭建Flutter開發(fā)環(huán)境

在masOS下可以同時(shí)進(jìn)行Android和iOS設(shè)備的測(cè)試。
獲取Flutter SDK、設(shè)置環(huán)境變量、運(yùn)行 flutter doctor命令、安裝 Xcode和安裝 Xcode。

IDE配置與使用

理論上可以使用任何文本編輯器與命令行工具來構(gòu)建Flutter應(yīng)用程序。 不過,F(xiàn)lutter官方建議使用Android Studio和VS Code之一以獲得更好的開發(fā)體驗(yàn)。Flutter官方提供了這兩款編輯器插件,通過IDE和插件可獲得代碼補(bǔ)全、語法高亮、widget編輯輔助、運(yùn)行和調(diào)試支持等功能,可以幫助我們極大的提高開發(fā)效率。

Android Studio 配置與使用

安裝Flutter和Dart插件

VS Code的配置與使用

VS Code是一個(gè)輕量級(jí)編輯器,支持Flutter運(yùn)行和調(diào)試。

安裝flutter插件

  1. 啟動(dòng) VS Code。
  2. 調(diào)用 View>Command Palette…。
  3. 輸入 ‘install’, 然后選擇 Extensions: Install Extension action。
  4. 在搜索框輸入 flutter ,在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點(diǎn)擊 Install。
  5. 選擇 ‘OK’ 重新啟動(dòng) VS Code。
  6. 驗(yàn)證配置
    • 調(diào)用 View>Command Palette…
    • 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action。
    • 查看“OUTPUT”窗口中的輸出是否有問題

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

  1. 啟動(dòng) VS Code
  2. 調(diào)用 View>Command Palette…
  3. 輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
  4. 輸入 Project 名稱 (如myapp), 然后按回車鍵
  5. 指定放置項(xiàng)目的位置,然后按藍(lán)色的確定按鈕
  6. 等待項(xiàng)目創(chuàng)建繼續(xù),并顯示main.dart文件

連接設(shè)備運(yùn)行Flutter應(yīng)用

Window下只支持為Android設(shè)備構(gòu)建并運(yùn)行Flutter應(yīng)用,而macOS同時(shí)支持iOS和Android設(shè)備。下面分別介紹如何連接Android和iOS設(shè)備來運(yùn)行flutter應(yīng)用。

連接Android真機(jī)設(shè)備

要準(zhǔn)備在Android設(shè)備上運(yùn)行并測(cè)試Flutter應(yīng)用,需要Android 4.1(API level 16)或更高版本的Android設(shè)備.

  1. 在Android設(shè)備上啟用 開發(fā)人員選項(xiàng) 和 USB調(diào)試 。詳細(xì)說明可在Android文檔中找到。
  2. 使用USB將手機(jī)插入電腦。如果設(shè)備出現(xiàn)調(diào)試授權(quán)提示,請(qǐng)授權(quán)你的電腦可以訪問該設(shè)備。
  3. 在命令行運(yùn)行 flutter devices 命令以驗(yàn)證Flutter識(shí)別您連接的Android設(shè)備。
  4. 運(yùn)行啟動(dòng)你應(yīng)用程序 flutter run。

默認(rèn)情況下,F(xiàn)lutter使用的Android SDK版本是基于你的 adb 工具版本。 如果想讓Flutter使用不同版本的Android SDK,則必須將該 ANDROID_HOME 環(huán)境變量設(shè)置為相應(yīng)的SDK安裝目錄。

連接iOS真機(jī)設(shè)備

要將Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備,需要一些額外的工具和一個(gè)Apple帳戶,還需要在Xcode中進(jìn)行一些設(shè)置。

略 。。。。

整理自 https://book.flutterchina.club/chapter1/install_flutter.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容