搭建Flutter開發環境 2019-03-18

標簽(空格分隔): Flutter Dart


由于Flutter會同時構建Android和IOS兩個平臺的發布包,所以Flutter同時依賴Android SDK和iOS SDK,在安裝Flutter時也需要安裝相應平臺的構建工具和SDK。


使用鏡像

由于在國內訪問Flutter有時可能會受到限制,Flutter官方為中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中:

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

注意: 此鏡像為臨時鏡像,并不能保證一直可用,讀者可以參考https://flutter.io/community/china以獲得有關鏡像服務器的最新動態。

在Windows上搭建Flutter開發環境

請確保可以在命令提示符或PowerShell中運行 git 命令

獲取Flutter SDK

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

更新環境變量

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

運行 flutter doctor命令

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

flutter doctor

該命令檢查你的環境并在命令行窗口中顯示報告。Dart SDK已經在打包在Flutter SDK里了,沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務。

Android設置

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

安裝Android Studio

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

在macOS上搭建Flutter開發環境

在masOS下可以同時進行Android和iOS設備的測試。
獲取Flutter SDK、設置環境變量、運行 flutter doctor命令、安裝 Xcode和安裝 Xcode。

IDE配置與使用

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

Android Studio 配置與使用

安裝Flutter和Dart插件

VS Code的配置與使用

VS Code是一個輕量級編輯器,支持Flutter運行和調試。

安裝flutter插件

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

創建Flutter應用

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

連接設備運行Flutter應用

Window下只支持為Android設備構建并運行Flutter應用,而macOS同時支持iOS和Android設備。下面分別介紹如何連接Android和iOS設備來運行flutter應用。

連接Android真機設備

要準備在Android設備上運行并測試Flutter應用,需要Android 4.1(API level 16)或更高版本的Android設備.

  1. 在Android設備上啟用 開發人員選項 和 USB調試 。詳細說明可在Android文檔中找到。
  2. 使用USB將手機插入電腦。如果設備出現調試授權提示,請授權你的電腦可以訪問該設備。
  3. 在命令行運行 flutter devices 命令以驗證Flutter識別您連接的Android設備。
  4. 運行啟動你應用程序 flutter run

默認情況下,Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果想讓Flutter使用不同版本的Android SDK,則必須將該 ANDROID_HOME 環境變量設置為相應的SDK安裝目錄。

連接iOS真機設備

要將Flutter應用安裝到iOS真機設備,需要一些額外的工具和一個Apple帳戶,還需要在Xcode中進行一些設置。

略 。。。。

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容