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/