安裝與配置Flutter開發環境

羅伊德發表於2019-03-21
Flutter開發環境

這篇部落格我們介紹了Flutter，並且對比了H5，React Native，Flutter。

由於Flutter是跨平臺的開發框架，開發一次可以同時執行在Android和iOS上面，所以我們開發時最好使用Mac系統，這樣我們可以同時測試兩個平臺的執行效果。

本文我們就來介紹在Mac系統下安裝與配置Flutter開發環境，並且執行我們的第一個Flutter應用！

為了Flutter的安裝配置順利，請科學上網。

安裝Flutter SDK

  1. 首先，我們需要首先下載Flutter的SDK，通過官網的這個連結可以找到每個版本的下載連結，找到最新穩定版下載。寫這篇文章時的最新版是v1.2.1版本，我們就以這個版本來舉例。

  2. 下載完成後我們對SDK進行解壓，可以解壓到任何位置。我們這裡解壓到使用者主目錄下的development目錄。下面我們開啟終端執行以下命令：

    mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
複製程式碼

  3. 將解壓後的路徑加入到環境變數中。

    • 開啟使用者目錄下的.bash_profile檔案，如果沒有則新建這個檔案：
    > ~/.bash_profile
複製程式碼
    • 在這個檔案的最後新增SDK的路徑到PATH中：
    export PATH="使用者路徑/development/flutter/bin:$PATH"
複製程式碼
    • 然後執行source讓配置生效：
    source ~/.bash_profile
複製程式碼

檢查Flutter安裝狀態

配置好後，Flutter提供了一個檢查安裝狀態的命令：

flutter doctor
複製程式碼

執行以終端會輸出當前的Flutter環境是否正確，還需要安裝什麼等等，比如Android SDK，iOS的開發環境等等。

配置iOS開發環境

如果在Mac系統上開發Flutter應用，筆者推薦使用iOS模擬器進行開發除錯，因為iOS模擬器相比Android模擬器要更加快速與流暢。

安裝Xcode

  1. 從Mac App Store搜尋並安裝Xcode。

  2. 安裝完成後在終端裡執行以下命令配置最新的命令列工具：

    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
複製程式碼

  3. 開啟一次Xcode並接受許可協議，或者通過命令列執行下面命令：

    sudo xcodebuild -license
複製程式碼

配置iOS模擬器

  1. 通過命令列開啟一個模擬器：

    open -a Simulator
複製程式碼

  2. 選擇模擬器，然後通過Hardware -> Device選單檢視確保當前模擬的是iPhone5s之後的機型。

配置Android開發環境

下面我們來介紹安裝Android的開發環境。

安裝Android Studio

  1. 從官網下載最新版的Android Studio。

  2. 開啟Android Studio，根據安裝嚮導提示安裝最新版的Android SDK，Android SDK Platform-Tools，Android SDK Build-Tools。

配置Android模擬器

  1. 開啟Android Studio後選擇Tools > Android > AVD Manager，然後選擇Create Virtual Device（建立虛擬裝置）。

  2. 填入裝置的資訊然後下一步，選擇映象的時候最好選擇架構x86或者x86_64，因為和電腦的架構一致，否則如果選擇ARM架構的話模擬器執行後會非常卡頓。

  3. (可選)選擇Hardware - GLES 2.0來進行硬體加速，以使模擬器獲得更好的執行速度。

  4. 一切都選好後點選Finish即完成配置。

配置程式碼編輯器(IDE)

雖然Flutter開發可以使用很多IDE，比如Android Studio，IntelliJ IDEA，VS Code等等，你可以根據喜好進行選擇。

但是筆者建議使用Android Studio，因為它對Flutter開發支援的最好，並且谷歌官方也是推薦使用它。

下面我們就來介紹Android Studio的配置。

  1. 開啟Android Studio。
  2. 安裝Flutter外掛。選擇選單Preferences > Plugins 然後點選Browse repositories搜尋Flutter，找到後開始安裝。
  3. 當跳出安裝Dart外掛的介面時，也點選Yes進行安裝。
  4. 安裝完成後重啟Android Studio。

上面我們已經完成了Flutter開發環境的配置，下面我們就開始建立我們的第一個應用吧！

Flutter初識，第一個應用！

我們開啟Android Studio，然後選擇開始建立Flutter工程：

安裝與配置Flutter開發環境

然後選擇Flutter Application，並點選下一步：

-w795

在這個幾面填入你的工程名，SDK位置與儲存位置等資訊：

-w798

點選下一步後，需要輸入你的包名，也就是你的域名，沒有域名的話輸入自己的名字一類的域名，目的就是為了保證你的應用的唯一性。

-w799

資訊輸入完成後我們點選"Finish"按鈕即可完成工程的建立。

當我們的工程編譯完成後，可以選擇不同的平臺執行，如圖所示：

-w416

預設的工程是一個簡單的計數器，選擇不同的平臺執行後可以看到執行後的介面：

安裝與配置Flutter開發環境

恭喜！第一個程式執行成功地執行起來了！

接下來我們就可以深入研究Flutter的強大特性了！

總結

本篇文章-Flutter的安裝配置並不複雜。另外還需要安裝配置iOS開發環境和Android開發環境。當然如果只是學習的話安裝iOS即可，如果你的電腦是Windows或者Linux的話，此時只能安裝配置Android開發環境了，因為iOS的開發環境只能在Mac上配置。還有Flutter的熱部署也會使開發效率提升很多，大家可以試著改一些程式碼體驗一下。

我的部落格中關於Flutter的所有文章可以點選這裡找到，歡迎關注！

如果有問題可以留言，或者給我發郵件lloyd@examplecode.cn，期待我們共同學習與成長！

相關文章