Windows下安裝配置Flutter

Flutter是谷歌的移動UI框架,能夠快速在iOS和Android上構建高質量的原生用戶界面。 Flutter能夠與現有的代碼一塊兒工做。在全世界,Flutter正在被愈來愈多的開發者和組織使用,而且Flutter是徹底免費、開源的。git

下一步公司的開發項目可能會用到Flutter,因此先安裝配置下。github

系統要求

要安裝並運行Flutter,您的開發環境必須知足如下最低要求:windows

  • 操做系統: Windows 7 或更高版本 (64-bit)
  • 磁盤空間: 400 MB (不包括Android Studio的磁盤空間).
  • 工具: Flutter 依賴下面這些命令行工具.
    • Git for Windows (Git命令行工具)app

      若是已安裝Git for Windows,請確保命令提示符或PowerShell中運行 git 命令,否則在後面運行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時須要手動添加C:\Program Files\Git\binPath系統環境變量中。若是是32位的Windows系統,請將Program Files換成Program File (X86)框架

獲取Flutter SDK

  1. 去flutter官網下載其最新可用的安裝包,點擊下載 ;ide

    注意,Flutter的渠道版本會不停變更,請以Flutter官網爲準。另外,在中國大陸地區,要想正常獲取安裝包列表或下載安裝包,可能須要FQ,讀者也能夠去Flutter github項目下去下載安裝包 。工具

  2. 將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:C:\src\flutter;注意,不要將flutter安裝到須要一些高權限的路徑如C:\Program Files\)。ui

  3. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat,雙擊運行並啓動flutter命令行,接下來,你就能夠在Flutter命令行運行flutter命令了。spa

更新環境變量

要在終端運行 flutter 命令, 你須要添加如下環境變量到系統PATH:操作系統

  • 轉到 「控制面板>用戶賬戶>用戶賬戶>更改個人環境變量」
  • 在「用戶變量」下檢查是否有名爲「Path」的條目:
    • 若是該條目存在, 追加 flutter\bin的全路徑,使用 ; 做爲分隔符.
    • 若是條目不存在, 建立一個新用戶變量 Path ,而後將 flutter\bin的全路徑做爲它的值.
  • 在「用戶變量」下檢查是否有名爲」PUB_HOSTED_URL」和」FLUTTER_STORAGE_BASE_URL」的條目,若是沒有,也添加它們。
    PUB_HOSTED_URL https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

重啓Windows以應用此更改

運行 flutter doctor

打開一個新的命令提示符或PowerShell窗口並運行如下命令以查看是否須要安裝任何依賴項來完成安裝:

flutter doctor

此時遇到問題,報錯

Error: The Flutter directory is not a clone of the GitHub project.
   The flutter tool requires Git in order to operate properly;
   to set up Flutter, run the following command:
   git clone -b beta https://github.com/flutter/flutter.git

 又從新看了一遍搭建環境文檔,都是按照流程操做的,不知道哪裏出的問題。。

百度查了一些踩坑文檔,發現解決辦法:

把剛剛下載的Flutter安裝包刪掉,從新在想要安裝的目錄下運行 git clone -b beta https://github.com/flutter/flutter.git

完成後會生成一個Flutter文件夾,若是和開始Path的路徑不同,記得去從新更新變量Path的路徑。

從新運行flutter doctor,正常。

一旦你安裝了任何缺失的依賴,再次運行flutter doctor命令來驗證你是否已經正確地設置了。

輸入flutter help在提示符下查看可用的工具。

建立新的應用

我用的是VS Code,下面就以VS Code爲例。用Android Studio也相似。

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

上述命令建立一個Flutter項目,項目名爲myapp,其中包含一個使用Material 組件的簡單的演示應用程序。

在項目目錄中,您的應用程序的代碼位於 lib/main.dart

運行應用程序

  • 確保鏈接好手機設備,或者開啓模擬器。(手機記得在設置裏打開USB調試和USB安裝)
  • 按 F5 鍵或調用Debug>Start Debugging
  • 等待應用程序啓動
  • 若是一切正常,在應用程序建成功後,您應該在您的設備或模擬器上看到應用程序:
    Starter App on Android
相關文章
相關標籤/搜索