系統:macOS
工具:VS Code
安裝 Flutter
首先下載Flutter macOS版到本地,建議選擇Beta版本的最新版本。
這里筆者下載的是v0.11.8的版本,為方便演示,我們將解壓后的flutter文件夾拖到桌面。
接下來把 Flutter 的?bin?目錄添加到系統?PATH?中:
export PATH=~/desktop/flutter/bin:$PATH
運行 flutter doctor
運行以下命令查看是否需要安裝其它依賴項來完成安裝:
flutter doctor
該命令檢查您的環境并在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了,沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務,例如:
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel beta, v0.11.8, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.1)
[?] Android Studio (version 3.2)
? ? ? Flutter plugin not installed; this adds Flutter specific functionality.
? ? ? Dart plugin not installed; this adds Dart specific functionality.
[?] VS Code (version 1.29.1)
[?] Connected device (2 available)
? No issues found!
這里我已經解決了相應的問題了,首次跑出來的結果除了Flutter那一項,基本都是報錯,因為沒有安裝相應的工具,或者版本太老舊,相應的報錯會以粗體顯示,描述的很詳細,這里不要一眼看懵逼了就放棄了,你只需要不斷執行該方法,然后安裝缺失的依賴,整個過程很流暢,不必解決所有報錯,提示“No issues found!”就OK啦,到這里Flutter的基本運行環境基本就搞定了。
設置Visual Studio Code
(支持漢化??:在擴展商店中搜索language,會出現中文簡體的插件)
安裝插件
1.快捷鍵commond+shift+p調出頂部對話框。
2.輸入“install”,然后選擇“Extensions:Install Extension”。
3.在搜索框中輸入"flutter",在列表中選擇“Chinese (Simplified) Language Pack for Visual Studio Code”,然后點擊Install,這時會看到工具在同時安裝Flutter和Dart。
4.選擇重新加載VS Code以啟用服務。
驗證環境配置
1.快捷鍵commond+shift+p調出頂部對話框
2.輸入“doctor”,然后選擇“Flutter: Run Flutter Doctor”操作
3.查看輸出是否有問題
hello world
1.快捷鍵commond+shift+p調出頂部對話框。
2.輸入“flutter”,然后選擇“Flutter: New Project”操作。
3.輸入項目名稱“hello_world”,點擊確認。
4.選擇項目存放路徑,點擊確認。
5.放下鍵盤鼠標,等待main.dart文件生成。
上述命令創建了一個名為hello_world的Flutter項目目錄,其中包含一個使用Material Components的簡單應用程序示例。
在項目目錄中,你的應用程序的代碼在lib/main.dart下。
運行APP
1.首先命令行輸入“open -a Simulator”,啟動一個模擬器。
2.調用 Debug > Start Debugging啟動調試,此時窗口會打印出相關進度,等待構建完成。
3.是心動的感覺~
結語:到這里,一切準備工作已經完成了,接下來將進入實戰踩坑之旅。