Flutter 超威猛的出現,可參考這篇 Google發表可同時支援Android與iOS的行動UI框架Flutter | iThome,survey 一些文章之後,發現原本正在學習 React Native 的小蛙,眼睛為之一亮,二話不說立馬來學,之前裝在 Mac 環境上時來不及記錄,這裡把 Windows 環境下的安裝過程記錄下來。

開始之前先看一下系統需求

安裝需求

  1. Windows 7.1 SP1 以上 (64 位元)
  2. 剩餘硬碟空間 400GB 以上 (不包含 IDE)
  3. 其他必要工具:PowerShell 5.0 以上、Git for Windows (開啟 Use Git from the Windows Command Prompt)

PowerShell 點進上述連結後,找適合自己的版本,例如小蛙選了 Windows 8.1 這一行的 WMF 5.1,進入點選 Download 後出現「Choose the download you want」這裡只要勾選最下面兩個 win8.1 開頭的下載就好。

下載 Flutter SDK

  1. Flutter 官網或是 flutter_windows_v0.5.1-beta.zip 下載。
  2. 解壓縮後,建議放在 C:\flutter\ 或是自己建立的資料夾,盡可能不要放在 C:\Program Files\
  3. 點兩下 C:\flutter\flutter_console.bat 就可以開啟 flutter console

設定 path 參數

  1. 開啟「控制台」-> 找到「使用者帳戶」-> 左側「變更我的環境變數」
  2. 找到 使用者變數 PATH,點兩下或按編輯進行修改
  3. 如果原本已經有東西了,請用半形的分號「;」做分隔,加入 flutter/bin 安裝路徑,例如小蛙的環境 XXXXXX;c:\flutter\bin

使用 Flutter Doctor 檢測環境

如果上面的環境有設定好的話,直接在 flutter console 下 flutter doctor 就會開始進行檢測

接著要來處理驚嘆號跟 X 的部份,上圖看起來有三個

  1. Android toolchain – develop for Android devices (Android SDK 27.0.3)
    Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses
  2. Flutter plugin not installed; this adds Flutter specific functionality.
  3. Dart plugin not installed; this adds Dart specific functionality.
  4. No devices available.

第一點是要接受 android license,只要下 flutter doctor –android-license 跳出的所有問題都按 Y 就可以了。

第二點跟第三點都是要安裝 Plugin,開啟 Android Studio,因為小蛙原本就有 Android Studio 了,這邊就不說安裝過程了,有需要的人請服用 Download Android Studio and SDK Tools | Android Developers,File -> Settings -> Plugins -> 搜尋 Flutter 後點選 Search in repositories -> 找到 Flutter 點選 Install。(Dart 也是一樣)

第四點可以連接實體的 Android 或是開啟 Android Studio 並啟動一個模擬器,這邊使用模擬器當例子,開啟 Android Studio -> Tools -> AVD Manager -> +Create Virtual Devices… -> 隨便選擇一個型號的 Phone -> Next – > 安裝缺少的 SDK 版本 -> Next 寫名字 -> Finish,這樣就可以啟動模擬器了。

處理好了再執行一次 flutter doctor,看到「No issues found!」就完成囉!

基本開發環境大致上這樣就可以用了,接下來就開始學習怎麼用 Dart 來寫 Flutter 吧!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *