2.帶你邁出Flutter開發的第一步

CoorChice發表於2019-03-19

目錄傳送門:《Flutter快速上手指南》先導篇

本篇教程是以 MacOS 為基礎的,且假設你已經安裝好了 Android 和 iOS 的開發環境。

1.安裝 Flutter SDK

Windows 使用者 | Linux 使用者

  1. 點選此處 ,下載 Flutter 的壓縮包。

    你可以 點選此處 ,檢視最新的 SDK 版本。

  2. 解壓 Flutter 到你熟悉的路徑下,例如:

 cd ~/development

 unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
複製程式碼
  1. 新增 Flutter 工具到你的環境中。

    export PATH="$PATH:`pwd`/flutter/bin"
    複製程式碼

    tips:建議將以上環境變數新增到 .bash_profile 中,這樣就不用每次執行了。

現在,你可以開始執行 Flutter 的命令了。

2.檢測 Flutter 開發環境

執行以下命令,以檢測 Flutter 開發環境:

 flutter doctor
複製程式碼

執行以上命令,可以自動檢測你的 Flutter 開發環境是否已經準備好了。

而且能夠提示你該如何完善你的 Flutter 發開環境,真是像你小時候照顧你的的保姆一樣貼心。

2.1 配置 Android 開發環境

  1. 下載 Android SDK

    這有一個簡單的方法,讓你可以更快的下載 Android SDK,就是你可以先下載好 AndroidStudio ,它會引導你準備好一切開發 Android 所需的。

    後續的 Flutter 開發工作,也將在 AndroidStudio 中進行。它十分的方便!?

    點選此處,下載 AndroidStudio。

    進入 AndroidStudio 設定頁:

    在此處下載 SDK:

  2. 配置 Android 環境變數。

    Flutter 需要通過環境變數來找到 Android 的 SDK,所以你需要把它的位置配置到 .bash_profile 中。

    如果你沒有這個檔案,可以通過以下命令建立它:

    touch ~/.bash_profile
    複製程式碼

    接著,開啟這個檔案:

    open ~/.bash_profile
    複製程式碼

    新增 Android 的環境變數:

    export ANDROID_HOME=你的 Android Sdk 的路徑
    export PATH=${PATH}:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools
    複製程式碼

    tips:你可以在上圖中 AndroidStudio 的 SDK 管理頁面檢視你機器上的 sdk 路徑。

    儲存修改後,通過以下命令讓配置生效:

    source ~/.bash_profile
    複製程式碼
  3. 安裝 Flutter 和 Dart 外掛

    進入 AndroidStudio 的 Plugin 管理介面:

    搜尋 Flutter 和 Dart 外掛,下載好後,重啟 AndroidStudio。

2.2 配置 iOS 開發環境

  1. 下載 Xcode。你可以直接在 AppStore 中下載。

  2. 根據檢測提示,一行一行的執行命令即可(不要懷疑?,就是怎麼簡單)。

恭喜你!現在你可以使用 Flutter 同時進行 Android 和 iOS 的開發了 ?

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章