【Flutter 學習筆記三】Windows 安裝 Flutter 並運行 DEMO

以前寫了 Mac 上安裝 Flutter ，鑑於有朋友提議須要一份 Windows 安裝過程，因此找了一臺 windows 電腦補上這篇文章

在 Windows 上安裝 Flutter 的過程特別簡單，讓咱們開始吧~

本機環境

• 系統：Windows 10 X64
• 內存：8G

系統要求

要在 Windows 上安裝 Flutter 須要知足如下條件：

• 系統：Windows 7 或更高版本（64位）
• 存儲：不低於 400 MB

系統要求就這些，還須要安裝兩個工具

• PowerShell 5.0或更高版本
• 適用於Windows的Git

  對於 PowerShell 通常狀況你們電腦都自帶，若是沒有的話自行下載安裝便可

  對於 Git 安裝，也是比較簡單的，若是不會可參考這篇教程：Windows10上安裝Git 2.10.2詳細圖解

安裝 SDK

前期工做準備完成以後，咱們開始安裝 Flutter

下載 SDK

flutter_windows_v0.5.1-beta.zip

經過上面連接下載 flutter v0.5.1 版本，這是目前最新的版本，若是須要下載其餘版本，或者你看到這篇文章的時間稍晚，能夠經過官方的 SDK 存檔頁下載

flutter sdk archive

下載完成後，咱們解壓出來獲得 flutter 文件夾，這個就是咱們的 SDK 了，讓咱們找個地方存放。我選擇存放在 D:\flutter

在選擇存放 flutter 的目錄時，有一點須要注意，就是不能選擇須要權限的文件夾去存放 SDK ，這會致使一系列問題

執行批處理文件

存放完成，咱們打開 flutter 文件夾，在 bin 目錄（D:\flutter\bin） 須要一個批處理文件 flutter.bat，雙擊執行。

設置環境變量

讓咱們找到系統環境變量 PATH，點擊編輯

選擇新建，輸入你的 flutter/bin 目錄全路徑 D:\flutter\bin，肯定保存後，你的系統變量列表應該以下圖

因爲 flutter 有一些命令須要聯網，因此咱們在國內使用還須要作個簡單的設置
(參考 Using Flutter in China )

咱們繼續設置兩個環境變量

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

接下來咱們打開命令行，運行命令 flutter 檢查是否安裝正常

若是你也有以上輸出，恭喜你 SDK 安裝完成了，萬里長城踏出了第一步，值得喝杯啤酒慶祝，哈哈~

配置依賴

雖然 SDK 安裝完成了，可是咱們還須要安裝一些別的依賴。

讓咱們執行 flutter doctor 它會自動幫咱們作依賴檢測

PS C:\Users\Administrator> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[X] Android Studio (not installed)
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.
PS C:\Users\Administrator>

flutter 已經給咱們把問題和解決方案都列了出來.

爲了寫這篇文章，我特地找了一臺乾淨的電腦，若是你的電腦之前沒安裝 Android SDK 和 Android Studio 的話，你看到的錯誤信息應該和我一致.

咱們按照提示來安裝 Android SDK 和 Android Studio ，因爲安裝比較簡單，你們參考 Android Studio安裝教程-win10-完整最新版 自行安裝便可

配置編輯器

當咱們把 Android SDK 和 Android Studio 安裝完成後，再次執行 flutter doctor，會發現仍是有問題須要咱們去解決

PS C:\Users\Administrator> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

Android licenses not accepted

第一個問題就是關於 Android licenses 的，flutter 也給出瞭解決方法，執行下面命令，而後一直輸入 Y 便可

flutter doctor --android-licenses

Flutter plugin not installed 和 Dart plugin not installed

這個是提示咱們 Android Studio 沒有安裝 Flutter 插件和 Dart 插件

讓咱們打開 Android Studio , 點擊 Plugins，選擇 Browse repositories，搜索 Flutter 進行安裝，在安裝 flutter 時，編輯器也會幫咱們安裝 dart 插件

當咱們安裝完成後，讓咱們重啓 Android Studio，完成編輯器配置

啓動 Flutter

讓咱們從新打開 Android Studio , 選擇 Start a new Flutter project

選擇 Flutter Application

項目名稱和存儲位置能夠自定義

這一步能夠輸入公司或組織的名稱

最後點擊完成，項目打開的目錄結構以下

對於這些目錄結構。咱們後面再講解

咱們新建項目時，Flutter 會咱們生成一個 Demo App，讓咱們把 Demo 跑起來

配置模擬器

讓咱們選擇 Tools > AVD Manager 來新建一個模擬器

選擇一個設備，點擊下一步

選擇一個系統鏡像，點擊下載

等待下載安裝完成，最後在設備欄中會顯示出來

讓咱們選擇這個設備，點擊運行。等待模擬器運行

ok。啓動了一個 Demo App，咱們能夠修改 main.dart 中的內容來體驗 flutter 的熱加載

疑難雜症

1. emulator: ERROR: x86 emulation currently requires hardware acceleration! Please ensure Windows Hypervisor Platform (WHPX) is properly installed and usable. CPU acceleration status: HAXM is not installed on this machine

解決方案：選擇 Tools > SDK Manager > SDK Tools , 安裝 HAXM 便可

結束

好了，從安裝到啓動 DEMO ，咱們都已經體驗過啦~ 能夠說是 flutter 的道路上咱們邁出了第一步，第一步已經邁出，第一百步也不會太遠啦~

這篇文章已經結束了，系列文章纔剛剛開始~ 歡迎你們繼續關注~

若是文章中發現了錯別字，但願您可以在評論中指正~ 謝謝

交流 QQ 羣：826912082
專欄：https://segmentfault.com/blog...