Flutter 環境搭建(mac)

系統要求

  • 操作系統: 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

  1. Android Studio 官網 選擇自己需要的版本下載
  2. 安裝完成后使用 flutter doctor 檢查提示報錯 Flutter plugin not installed. Dart plugin not installed.
  3. 打開Android studio安裝插件,打開過程中,提示未安裝android sdk,先安裝sdk(第一次安裝下載了好幾個小時不停報錯,于是干脆放棄,過了兩天再重新打開Android studio 居然就順利安裝成功了。 - - #)
  4. 允許協議flutter doctor --android-licenses
  5. 安裝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 路徑

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容