系統要求
- 操作系統: macOS (64-bit)
- 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間).
- 工具: Flutter 依賴下面這些命令行工具.
bash, mkdir, rm, git, curl, unzip, which
使用鏡像
由于國內訪問Flutter有時可能會受到限制, 添加環境變量
vim ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
=> esc => :wq 保存退出
1. 下載SDK
sdk較大,先開始下載任務(二選一)
官網下載
Github下載
2. 解壓
下載好以后,解壓到準備好的目錄,以我自己的為例
cd ~/development
unzip ~/Downloads/flutter_macos_v1.1.8-dev.zip
3. 添加flutter相關工具至PATH
export PATH=~/development/flutter/bin:$PATH
(是自己電腦存放解壓后文件的地址)
為了讓配置立即生效,執行
source ~/.bash_profile
查看是否已經安裝成功,執行
flutter doctor
[圖片上傳失敗...(image-dd0d-1548261207753)]
根據提示配置或下載
4. 安裝Android Studio
- Android Studio 官網 選擇自己需要的版本下載
- 安裝完成后使用 flutter doctor 檢查提示報錯 Flutter plugin not installed. Dart plugin not installed.
- 打開Android studio安裝插件,打開過程中,提示未安裝android sdk,先安裝sdk(第一次安裝下載了好幾個小時不停報錯,于是干脆放棄,過了兩天再重新打開Android studio 居然就順利安裝成功了。 - - #)
- 允許協議
flutter doctor --android-licenses
- 安裝Flutter插件
ps: 安裝sdk成功后 flutter doctor 一直報錯,提示sdk未找到,原來是安卓sdk的環境變量的路徑配錯了
5. 安裝brew
brew 官網
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
根據官網提示安裝
6. 安裝xcode
提示我的xcode不是最新版了,于是又重新下載了最新版(9.1->10.1為什么不是更新,更是需要直接下載,6+G又下了很久)
首次安裝執行sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
7. 安裝剩余軟件
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
8. 連接設備
[!] Connected devices
! No devices available
因為用的安卓手機,所以當然是用真機啦。安卓機連mac電腦需要安裝
filetranser.dmg 附上下載地址
我是使用手機的內置光盤安裝的
最后執行一次flutter doctor
,全部通過!!
我不會說這個環境搭建我斷斷續續花了2周的??
!!! VS Code 安裝
也許是作為一名前端的一根筋,讓我用andriod stuido開發總覺得渾身不舒服。好在vscode也是支持flutter的,馬上配置上。
版本要求: 1.20.1或更高版本
- 調用 View>Command Palette…
- 輸入 ‘install’, 然后選擇 Extensions: Install Extension action
- 搜索 ‘Flutter’, 點擊 Install安裝
- 重新啟動 VS Code
可以查看到成功安裝了Flutter 和 Dart
Flutter插件: 支持Flutter開發工作流 (運行、調試、熱重載等).
Dart插件: 提供代碼分析 (輸入代碼時進行驗證、代碼補全等). - 調用 View>Command Palette…
- 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action
- 查看“OUTPUT”窗口中的輸出是否有問題
[flutter] flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel dev, v1.2.2, on Mac OS X 10.14.3 18D109, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.1)
[?] Android Studio (version 3.2)
[?] Connected device (1 available)
? No issues found!
exit code 0
查閱的教程
Flutter 官網
Android Studio 安裝 Plugin
Android Studio 查看 SDK 路徑