前言

本文為個人記錄macOS系統(tǒng)使用fvm從零開始搭建flutter開發(fā)環(huán)境到項目運行的過程，非教程性質，僅供參考，如有疑問或建議，歡迎大家在評論區(qū)留言

附上開發(fā)設備配置

一、安裝vscode

以vscode為編碼工具

下載地址：Download Visual Studio Code - Mac, Linux, Windows

下載后解壓安裝即可

二、安裝Xcode和Android Studio

Xcode

在 iOS 真機或者模擬器上運行 Flutter 應用，需要安裝Xcode

在?Mac App Store?安裝最新穩(wěn)定版 Xcode

Android Studio

在 安卓 真機或者模擬器上運行 Flutter 應用，需要安裝Android Studio

在?Download Android Studio & App Tools - Android Developers

下載安裝最新穩(wěn)定版 Android Studio

?根據(jù)自己的mac芯片類型選擇安裝版本

三、配置IOS模擬器

在終端輸入一下指令代碼運行iOS模擬器

open -a Simulator

?

PS：

問：終端在哪里？?

答：command鍵+空格鍵呼出搜索彈窗，搜索終端，一般為第一個

四、安裝Homebrew

Homebrew 是 macOS 的套件管理工具，或稱包管理器，可理解成與App Store類似的軟件商店，在此用作安裝FVM的工具

復制以下指令至終端，回車執(zhí)行

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

下圖為回車后的執(zhí)行結果

?自行選擇源，輸入對應序號后回車，輸入Y執(zhí)行腳本

?等待片刻，Homebrew安裝完成如下圖所示，如果安裝失敗，換個源再試試

此處提示是否需要安裝Core、Cask、services，可自行判斷是否安裝

PS：

問：Core、Cask、services是什么？

答：Homebrew Core是Homebrew 核心軟件倉庫

Homebrew cask是在brew 的基礎上一個增強的工具，用來安裝Mac上的Gui程序應用包（.dmg/.pkg）, 比如qq、chrome等。它先下載解壓到統(tǒng)一的目錄中（/opt/homebrew-cask/Caskroom），省掉了自己去下載、解壓、拖拽（安裝）等步驟，同樣，卸載相當容易與干凈。然后再軟鏈到~/Applications/目錄下, 非常方便，而且還包含很多在 AppStore 里沒有的常用軟件。

Homebrew Services是一套可以通過?launchctl來管理安裝的服務的套件，macOS使用launchctl命令加載開機自動運行的服務，brew service可以簡化lauchctl的操作。

參考資料：

Homebrew Core 源使用幫助 — USTC Mirror Help 文檔

Mac上的Homebrew和Homebrew-cask_Schuyler_yuan的博客-CSDN博客

homebrew學習（五）之homebrew cask和homebrew services - 愛碼網

下圖為選擇安裝并且安裝完成后的顯示

此處安裝過程筆者的耗時較長～?

Homebrew安裝參考資料：

Homebrew國內如何自動安裝（國內地址）（Mac & Linux） - 知乎

Homebrew使用參考資料：

Homebrew 使用詳解，macOS 的第二個 Mac App Store - 知乎

五、安裝FVM

在終端輸入以下指令，將fvm所在庫拷貝到本地

brew tap leoafarias/fvm

完成后再輸入以下指令，安裝fvm

brew install fvm

安裝完成如下圖

PS：

問：如果要卸載它們要怎樣操作？

答：分別輸入以下對應指令至終端

brew uninstall fvm
brew untap leoafarias/fvm

?參考資料：

Flutter版本管理器-FVM

六、配置sdk和依賴包資源環(huán)境變量

在終端輸入以下指令配置中國鏡像

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

FLUTTER_STORAGE_BASE_URL指定了flutter sdk下載來源?

export PUB_HOSTED_URL=https://pub.flutter-io.cn

PUB_HOSTED_URL指定了pub get（依賴包）下載來源

PS：國內有可能會出現(xiàn)下載不了的情況，因此可以通過設置該變量指定鏡像地址，這里提供上海交大Linux用戶組的鏡像以作備用

export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn

參考資料：

配置 Flutter 中國鏡像 – 簡書-Mikel

七、配置fvm和flutter環(huán)境變量

fvm

export FVM_HOME=$HOME/fvm

flutter

export PATH=$HOME/fvm/default/bin:$PATH

八、flutter sdk版本查詢和下載

fvm -h獲取fvm所有指令

?fvm releases獲取可安裝的sdk版本

?fvm install 版本號安裝指定版本的sdk

下圖以安裝3.10.2版本為例

?fvm list查看已安裝的sdk版本

因為之前安裝了3.10.3版本，所以列表中存在兩個版本

fvm global 版本號設置全局默認sdk版本

?設置全局默認sdk版本后可用fvm list查詢是否生效

九、flutter自檢查

在終端輸入flutter doctor來查看當前環(huán)境是否需要安裝其他的依賴（如果想查看更詳細的輸出，增加一個?-v?參數(shù)即可）

PS：

這個命令會檢查你當前的配置環(huán)境，并在命令行窗口中生成一份報告。安裝 Flutter 會附帶安裝 Dart SDK，所以不需要再對 Dart 進行單獨安裝。你需要仔細閱讀上述命令生成的報告，看看別漏了一些需要安裝的依賴，或者需要之后執(zhí)行的命令（這個會以?加粗的文本?顯示出來）。

如果按照本文的步驟進行，應該會獲得以下報告

?如上圖所示，有1個報錯和2個警告，接下來我們一個一個解決

[?] Android toolchain - develop for Android devices

[?] Android toolchain - develop for Android devices
    ? Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

打開Android studio，剛安裝后首次打開需要配置和下載一些資源，按提示點同意跟下一步就好，

最后走到finish

如下圖，選擇SDK Manager

復制紅框的路徑

?在終端輸入flutter config --android-sdk 復制的路徑

回到下圖的界面，在SDK Tools的列表里選擇Android SDK command-line Tools，點擊右下角OK進行安裝

?安裝完成后，在終端輸入指令flutter doctor --android-licenses，回車執(zhí)行

?執(zhí)行后會有幾個詢問，都輸入y之后回車就好

?[!] Xcode - develop for iOS and macOS (Xcode 14.3)

[!] Xcode - develop for iOS and macOS (Xcode 14.3)
    ? CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

?在終端中輸入以下指令安裝cocoapods

sudo gem install cocoapods

執(zhí)行后有可能會出現(xiàn)以下報錯

按照提示在終端執(zhí)行以下指令

sudo gem install activesupport -v 6.1.7.3

?執(zhí)行完成后，在終端中再一次輸入以下指令?

sudo gem install cocoapods

cocoapods安裝完成

?[!] Network resources

[!] Network resources                   
    ? A network error occurred while checking "https://maven.google.com/": Operation timed out

依次找到flutter/packages/flutter_tools/lib/src/http_host_validator.dart文件（可以在訪達的搜索欄中先搜索出flutter_tools再逐級進入，這里我有兩個sdk版本，所以會有兩個flutter_tools）

?用vscode打開http_host_validator.dart文件，將https://maven.google.com/?修改為https://dl.google.com/dl/android/maven2/

在訪達的搜索欄中搜索flutter_tools.snapshot，刪除該文件，再重復執(zhí)行本文的第六步，即在終端中再次配置sdk和依賴包資源環(huán)境變量

在終端中再次執(zhí)行flutter doctor進行自檢查

顯示沒有發(fā)現(xiàn)問題?

?參考資料：

flutter學習之旅(一)_結成明日奈是我老婆的博客-CSDN博客

十、創(chuàng)建并運行flutter項目

先創(chuàng)建一個文件夾用來存放項目，用vscode打開該文件夾，使用快捷鍵control + `呼出終端，在終端輸入fvm flutter create 項目名后回車創(chuàng)建項目

iOS端運行

在終端執(zhí)行open -a Simulator打開iOS模擬器（參考本文步驟三），然后在vscode終端中執(zhí)行cd 項目名進入項目文件夾，最后執(zhí)行fvm flutter run運行項目

?項目成功運行

安卓端運行

運行Android Studio，打開項目文件夾，點擊右上角Device Manager（如下圖）

?再點擊Create device，根據(jù)需求選擇設備后點擊Next（如果已經創(chuàng)建過設備則可跳過此步驟）

?選擇系統(tǒng)，繼續(xù)點擊Next

?點擊Finish，完成設備創(chuàng)建

?點擊小三角運行設備

?點擊Window按鈕可單獨顯示虛擬機窗口

?在vscode終端中執(zhí)行cd 項目名進入項目文件夾，再執(zhí)行fvm flutter run運行項目（首次執(zhí)行花費時間可能會較長）

項目成功運行

?

?本文結束文章來源地址http://www.zghlxwxcb.cn/news/detail-707904.html

到了這里，關于【Flutter】macOS從零開始使用FVM搭建Flutter開發(fā)環(huán)境的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！