建議先看官方文檔, 下面是作者自己的搭建過程,僅供參考
官方中文文檔
一、Flutter SDK
1.Flutter官網下載其最新可用的安裝包下載SDK
Flutter官網SDK下載
2.解壓安裝包到你指定的目錄，可以右鍵用解壓工具,也可以用下面命令
cd ~/development
unzip ~/Downloads/flutter_macos_1.17.1-stable.zip
3.如果下面指令只在當前命令行窗口執(zhí)行, 該設置PATH環(huán)境變量是臨時的，要想永久將Flutter添加到PATH,需要將下面代碼添加到.bash_profile文件中:
首先終端輸入, 打開.bash_profile文件
open ~/.bash_profile
.bash_profile文件中添加下面環(huán)境配置
#Flutter環(huán)境變量SDK地址
export PATH=本地flutter路徑/bin:$PATH
#google提供服務地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
其中google提供服務地址 也可以使用上海交通大學的鏡像地址
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
4.運行source ~/.bash_profile命名, 刷新當前終端窗口。
source ~/.bash_profile
或者運行
source $HOME/.bash_profile
注意: 如果你使用終端是zsh，終端啟動時
~/.bash_profile將不會被加載，解決辦法就是修改～/.zshrc，在其中添加：source ～/.bash_profile
- 打開.zshrc文件
open ~/.zshrc
- 在其中添加：
source ～/.bash_profile保存退出,執(zhí)行souce ~/.zshrc
source ~/.zshrc
5.驗證“flutter/bin”是否已在PATH中：
echo $PATH
二、當前終端窗口檢測flutter環(huán)境
flutter doctor
完成提示:
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.4 19E287, locale
zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[?] Xcode - develop for iOS and macOS (Xcode 11.5)
[?] Android Studio (version 3.5)
[?] VS Code (version 1.45.1)
[?] Connected device (1 available)
? No issues found!
三、安裝Android Studio
如果想為Flutter配置Android開發(fā)環(huán)境，需要在我們的電腦上安裝一個Android Studio。
Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 應用集成開發(fā)環(huán)境 (IDE)。
1.建議從官網下載安裝3.5.3版使用, 用最新版3.6.3有和Flutter和Dart插件兼容問題
2.下載Flutter和Dart插件
Android Studio安裝完后下載Flutter和Dart插件
Flutter插件： 支持Flutter開發(fā)工作流 (運行、調試、熱重載等)。
Dart插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等)。點擊左上角Android Studio進入Preferences
- Plugins中搜索Flutter, 選擇第一個Flutter點擊install按鈕，同樣下載Dart。
3.添加模擬器
1>. 啟動 Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device。
2>. 選擇一個設備并選擇 Next。
3>. 為要模擬的Android版本選擇一個或多個系統(tǒng)映像，然后選擇 Next. 建議使用 x86 或 x86_64 image。
4>. 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬件加速。
5>. 驗證AVD配置是否正確，然后選擇 Finish。
有關上述步驟的詳細信息，請參閱 Managing AVDs.
6>. 在 Android Virtual Device Manager中, 點擊工具欄的 Run。模擬器啟動并顯示所選操作系統(tǒng)版本或設備的啟動畫面。
7>. 運行 flutter run 啟動您的設備. 連接的設備名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86。
4. 查看AndroidSDK路徑
-
啟動界面中Android Studio可以查看AndroidSDK路徑, 啟動頁點擊Configure->SDKManager。如下圖:
或者選擇頂部菜單欄 Android Studio>Tools>Android>SDK Manager
四、VSCode 配置
1) 安裝flutter和Dart插件
1.啟動 VS Code。
2.選擇擴展。
3.在搜索框輸入 flutter ，在搜索結果列表中選擇 Flutter (只有未安裝插件才顯示Install按鈕) ，然后點擊 Install。同樣搜索Dart后同樣安裝操作。
4.選擇 ‘OK’ 重新啟動 VS Code。
5.驗證配置:
- 調用 View>Command Palette…
- 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action。
- 查看“OUTPUT”窗口中的輸出是否有問題
2) VSCode中文配置
1.打開“vscode” ，按快捷鍵“Ctrl+Shift+P”。
2.在頂部搜索框中輸入“configure language”，按回車鍵。
3.“vscode”里面就會打開一個語言配置文件，將“en-us”修改成“zh-cn”，按“Ctrl+S”保存設置，重啟“vscode”就可以了.
4.如果沒有zh-cn ,點擊下面 Install additional languages, 下載中文語言包后,再次重復上面操作.
3) VSCode代碼提示配置
代碼片段
Flutter Widget Snippets: 提供 Widget 代碼片段
Awesome Flutter Snippets: 提供常用函數的代碼片段。使用起來非常方便，例如創(chuàng)建一個 Stateful App，只需要輸入 fstful，即可快速創(chuàng)建。高亮
Bracket Pair Colorizer
vscode 自動會為 Dart 代碼進行高亮顯示，因此無需下載其他高亮插件。但是寫過 Flutter 的應該都會覺得， Flutter 簡直就是嵌套地獄。因此推薦這個插件，可對括號進行高亮匹配顯示，這樣更易于閱讀以及修改代碼。
