Flutter開發環境（Window）配置及踩坑記錄

Flutter 是 Google 用以幫助開發者在 iOS 和 Android 兩個平臺開發高質量原生 UI 的移動 SDK。Flutter 兼容現有的代碼，免費且開源，在全球開發者中普遍被使用。

Flutter有如下特色：

• Flutter的跨平臺開發，在MacOs、Windows、Linux、Android、IOS，甚至能夠在谷歌最新的操做系統上Fuchsia進行運行，良好的跨平臺開發，能夠減小開發成本。Flutter還有一個開發利器‘熱刷新’，Hot Reload，在Android Studio中編輯Dart代碼後，只須要點擊保存或者「Hot Reload」按鈕，就能夠當即更新到正在運行的設備上，不須要從新編譯App，甚至不須要重啓App，當即就能夠看到更新後的樣式。
• 原生用戶界面，帶給用戶的體驗更好，性能更好。flutter渲染引擎依靠跨平臺的Skia圖形庫來實現，依賴系統的只有圖形繪製相關的接口，能夠在最大程度上保證不一樣平臺、不一樣設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高得多

Flutter開發環境window版：

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

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

  • git for windows (Git命令行工具)

下載Flutter SDK:

因爲一些Flutter命令須要聯網獲取數據，若是您是在國內訪問，因爲衆所周知的緣由，直接訪問極可能不會成功。 PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google爲國內開發者搭建的臨時鏡像。先在你的環境變量中添加以下：

開始->控制面板->用戶帳戶->更改個人環境變量->新建

肯定後，再新建一個以下：

先在你經常使用的目錄下新建一個文件夾，而後用vscode編輯器打開那個文件夾，進行git下載，輸入以下命令：

JLB3610@JLB3610-PC MINGW64 /e/zengfp/flutter
$ git clone -b beta https://github.com/flutter/flutter.git

 

把flutter下載到flutter文件夾下。下載成功後，繼續輸入

JLB3610@JLB3610-PC MINGW64 /e/zengfp/flutter
$ PUB_HOSTED_URL=https://pub.flutter-io.cn

 

再輸入

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

 

最後再輸入

 PATH=E:\zengfp\flutter\flutter\bin:$PATH

 

上面那個紅色的路徑是flutter文件下載後的bin的路徑。根據本身安裝的文件路徑進行設置。

安裝完成後，繼續在環境變量Path中設置flutter的路徑，注意用;隔開如圖：

設置完這些以後，會對後面的依賴下載什麼的更加快捷方便。

重啓window讓上面的設置生效。

而後在flutter文件下面，找到flutter_console.bat文件，雙擊打開會出現如圖，進入到終端

運行flutter doctor 命令以查看是否須要安裝任何依賴項來完成安裝：

flutter doctor

 

這個的安裝過程會比較慢，並且也容易出現坑。若是你不是經過flutter_console.bat進入的終端進行flutter doctor安裝依賴，而是直接在git下直接使用命令flutter doctor安裝依賴，就會出現報錯，會提示Unknown operating system. Cannot install Dart SDK。

你會看到flutter/bin/cache/dart-sdk文件下爲空，沒有安裝成功。因此須要經過flutter_console.bat進入進行安裝，這樣纔會成功。

Android studio配置

須要安裝Android studio 3.0及以上版本和Android SDK，並且還須要Flutter和Dart插件才能夠使用

Flie->settings-Browse Repositories

 一樣的方法安裝Dart。

而後開始建立寫demo建立文件夾了

 

 

以後開始真機調試了，用數據線將電腦與你的手機鏈接，手機開啓USB調試

點擊綠色三角形按鈕，開啓運行

而後在真機上會看到以下圖：

 

這個時候體驗下熱重載：

修改後保存，在手機迅速看到改變，方便快捷。

VScode中配置

打開vscode，在擴展裏面輸入flutter，下載這個插件以後重啓vscode。

而後在本身建立的flutter項目目錄下，輸入flutter devices命令

若是出現手機的型號，說明機子鏈接成功，而後輸入如下命令：

JLB3610@JLB3610-PC MINGW64 /e/zengfp/flutter/myapp
$ flutter run
Launching lib/main.dart on GIONEE O8 in debug mode...
Initializing gradle... 1.2s
Resolving dependencies... 3.2s
Gradle task 'assembleDebug'... 10.4s
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk... 3.5s
Syncing files to device GIONEE O8... 1.8s

🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on GIONEE O8 is available at: http://127.0.0.1:59907/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

 

出現了上面的顯示，說明在你手機上你已經能看到顯示結果了。在vscode中的熱更新是按字母‘r’鍵，也是比較方便。

附上flutter中文網址： https://flutterchina.club/

官網：https://flutter.io/