一、安裝Android Studio
官網(wǎng)地址：
https://developer.android.google.cn/
歷史版本下載地址：
https://developer.android.com/studio/archive?hl=zh-cn
二、安裝Xcode
到App Store下載安裝最新版本，如果MacOS更新不到13.0以上就無(wú)法安裝最新的Xcode，只能去下載以前版本的Xcode。
歷史版本下載地址：
https://developer.apple.com/download/all/?q=Xcode
三、安裝VS Code
VS Code官網(wǎng)地址：
https://code.visualstudio.com
四、安裝Flutter SKD
官網(wǎng)地址：
https://docs.flutter.dev/get-started/install/macos
注意：蘋(píng)果芯片需要安裝rosetta翻譯環(huán)境
Flutter用于git安裝和升級(jí)。我們建議安裝Xcode，其中包含git，但您也可以單獨(dú)安裝git。
$ sudo softwareupdate --install-rosetta --agree-to-license
1.下載Flutter SDK包
下載解壓后，將目錄放到/Library/Developer/flutter。
2.打開(kāi)終端配置環(huán)境變量
配置前，先打開(kāi) 系統(tǒng)偏好設(shè)置->安全性與隱私? 進(jìn)入頁(yè)面等著。因?yàn)閺牟皇苄湃蔚脑聪螺d的SDK，安裝時(shí)需要用戶(hù)手動(dòng)點(diǎn)同意。
1).執(zhí)行命令 $ vim ~/.bash_profile
2).輸入i （進(jìn)入可編輯狀態(tài)）
3).復(fù)制下面的代碼粘入
export PATH=/Library/Developer/flutter/bin:$PATH?
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4).按esc輸入:wq退出
其它指令：
q 表示退出；
w 表示保存退出；
q! 表示強(qiáng)制退出。
5).執(zhí)行命令 $ source ~/.bash_profile
6).執(zhí)行命令 $ flutter -h
安裝成功，提示Manage your Flutter app development。
7).執(zhí)行命令 $ flutter doctor
查看是否需要安裝任何依賴(lài)項(xiàng)才能完成設(shè)置
比如我安裝時(shí)，有如下提示。
8).按照提示完善環(huán)境
報(bào)錯(cuò)：
cmdline-tools component is missing????? Run `path/to/sdkmanager --install "cmdline-tools;latest"`????? See https://developer.android.com/studio/command-line for more details.
解決：
打開(kāi)Android Studio進(jìn)入Preferences，安裝Android SDK Command-line Tools (latest)。
報(bào)錯(cuò)：
? Android license status unknown.????? Run `flutter doctor --android-licenses` to accept the SDK licenses.????? See https://flutter.dev/docs/get-started/install/macos#android-setup for????? more details.
解決：
執(zhí)行命令 $ flutter doctor --android-licenses
需要去同意Android的一些許可
報(bào)錯(cuò)：
CocoaPods not installed.
解決：
安裝CocoaPods，內(nèi)容有點(diǎn)多，提出來(lái)放到了下一節(jié)。
五、安裝CocoaPods
1.了解brew、rvm、ruby、gem、cocaspods之間的關(guān)系是什么樣的
在 macOS 環(huán)境中，Brew、RVM、Ruby、Gem 和 CocoaPods 之間存在以下關(guān)系：
Homebrew (Brew)：Homebrew 是 macOS 上的包管理器，用于安裝和管理各種開(kāi)源軟件包。它使您能夠輕松地從命令行安裝、更新和卸載軟件包，包括開(kāi)發(fā)工具、庫(kù)和其他應(yīng)用程序。
RVM (Ruby Version Manager)：RVM 是一個(gè)用于管理和安裝多個(gè) Ruby 版本的工具。它允許您在同一臺(tái)計(jì)算機(jī)上同時(shí)安裝和切換不同版本的 Ruby。RVM 還提供了一個(gè)獨(dú)立的環(huán)境，以隔離不同版本的 Ruby 和它們的依賴(lài)項(xiàng)。
Ruby：Ruby 是一種動(dòng)態(tài)、面向?qū)ο蟮木幊陶Z(yǔ)言，經(jīng)常用于 Web 開(kāi)發(fā)和腳本編寫(xiě)。它由日本開(kāi)發(fā)者松本行弘（Yukihiro Matsumoto）創(chuàng)建，并且具有簡(jiǎn)潔、優(yōu)雅的語(yǔ)法。RVM 用于安裝和管理不同版本的 Ruby。
Gem：Gem 是 Ruby 的軟件包管理系統(tǒng)。它用于安裝、管理和分發(fā) Ruby 應(yīng)用程序和庫(kù)。Gem 包含可重用的代碼庫(kù)，讓開(kāi)發(fā)人員能夠輕松地共享和使用 Ruby 的擴(kuò)展功能。通過(guò) Gem，您可以安裝和管理與 Ruby 相關(guān)的軟件包和依賴(lài)項(xiàng)。
CocoaPods：CocoaPods 是一個(gè)用于管理 iOS 和 macOS 項(xiàng)目中的第三方庫(kù)依賴(lài)項(xiàng)的工具。它使用 Ruby 編寫(xiě)，并且依賴(lài)于 Gem 來(lái)安裝和管理自己的軟件包。CocoaPods 允許您在 Xcode 項(xiàng)目中輕松地集成和更新各種開(kāi)源庫(kù)。
綜上所述，Brew 是用于管理 macOS 上的軟件包的包管理器，RVM 是用于管理和安裝多個(gè) Ruby 版本的工具，Ruby 是編程語(yǔ)言本身，Gem 是 Ruby 的軟件包管理系統(tǒng)，而 CocoaPods 是用于管理 iOS 和 macOS 項(xiàng)目中的第三方庫(kù)依賴(lài)項(xiàng)的工具，它使用 Gem 來(lái)安裝和管理自己的軟件包。Brew、RVM、Ruby、Gem 和 CocoaPods 提供了一套工具鏈，使您能夠更方便地安裝、管理和使用 Ruby 和相關(guān)的軟件包和依賴(lài)項(xiàng)。
2.檢查并安裝brew
驗(yàn)證 Homebrew 是否安裝
$ brew doctor執(zhí)行以下指令，下載 Homebrew 的安裝腳本并自動(dòng)執(zhí)行安裝過(guò)程。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"3.檢查并安裝rvm
檢查rvm是否安裝
$ rvm -v檢查提示rvm: command not found時(shí)，就表示rvm需要安裝。
先用下面命令安裝
$ curl -L https://get.rvm.io | bash -s stable上一步執(zhí)行完成后再執(zhí)行
$ source ~/.rvm/scripts/rvm再次查詢(xún)r(jià)vm的安裝情況
$ rvm -v4.檢查并安裝ruby
先檢查ruby的信息，安裝cocaPods，ruby環(huán)境不得低于2.2.2，否則會(huì)報(bào)錯(cuò)。
$ ruby -v
最好更新到新版本，可以去官網(wǎng)查詢(xún)r(jià)uby最新版本https://www.ruby-lang.org/zh_cn/downloads/
安裝最新穩(wěn)定版本ruby
$ rvm install 3.2.2然后輸入指令查看是否安裝成功
$ rvm list
5.檢查并更新gem ruby
檢查gem ruby版本，需要輸入一次密碼。
$ sudo gem -v
更新gem ruby
最新版本，可以去網(wǎng)站查詢(xún)一下https://rubygems.org/pages/download
$ gem update --system
6.檢查并更新ruby源
檢查ruby源
$ gem sources -l
如果展示https://rubygems.org/，則移除此ruby源。
$ gem sources --add https://gems.ruby-china.com/7.安裝CocoaPods?
cocoapods官網(wǎng)地址:
https://cocoapods.org/
安裝cocoapods指令，sudo表示管理員指令，需要輸入密碼。
$ sudo gem install -n /usr/local/bin cocoapods或者
$ sudo gem install -n /usr/local/bin cocoapods --pre安裝后，檢查安裝情況。
$ pod --version
8.CocoaPods使用
先創(chuàng)建一個(gè)iOS測(cè)試工程GaminTestDemo
然后打開(kāi)終端，cd到項(xiàng)目。
$ cd /Users/gamin/Desktop/GaminTestDemo然后再初始化pod，執(zhí)行成功后，目錄中會(huì)多出一個(gè)Podfile文件。
$ pod init
打開(kāi)Podfile文件，添加依賴(lài)庫(kù)AFNetworking。
最后，在終端執(zhí)行指令安裝依賴(lài)庫(kù)。
$ pod install
安裝成功后，項(xiàng)目目錄中會(huì)多出Pods、xxx.xcworkspace、Podfile.lock。之后打開(kāi)項(xiàng)目，需要用.xcworkspace文件去打開(kāi)。
9.重新檢查flutter環(huán)境
$ flutter doctor提示CocoaPods安裝了但不起作用
這是Ruby的版本和CocoaPods的版本不對(duì)應(yīng)產(chǎn)生的問(wèn)題
終端執(zhí)行命令查看，果然當(dāng)前使用了舊版本的ruby。
$ source ~/.rvm/scripts/rvm
$ rvm list
切換ruby版本
$ rvm use ruby-3.2.2移除Ruby版本
$ rvm uninstall ruby-2.6.6移除舊版本我這里會(huì)報(bào)錯(cuò)，就不移除了，因?yàn)榍袚Qruby后上面的問(wèn)題就修復(fù)了。
六、創(chuàng)建Flutter工程
1.用VS Code創(chuàng)建
1).安裝Dart、Flutter和Code Runner插件
2).創(chuàng)建Flutter工程
Command+Shift+P打開(kāi)全局搜索，搜索flutter，選擇Flutter:New Project回車(chē)。
選擇Application回車(chē)
選擇將項(xiàng)目放在什么位置
輸入項(xiàng)目名稱(chēng)創(chuàng)建項(xiàng)目，注意規(guī)范了項(xiàng)目名稱(chēng)只能輸入小寫(xiě)字母和下劃線(xiàn)。
2.用Android Studio創(chuàng)建
1).安裝Flutter、Dart插件
2).創(chuàng)建Flutter工程
打開(kāi)Android Studio，選擇Flutter語(yǔ)言，確認(rèn)Flutter SDK 路徑后進(jìn)行下一步。
項(xiàng)目名稱(chēng)規(guī)范未小寫(xiě)字母加下劃線(xiàn)，這一步比用VS Code創(chuàng)建Flutter應(yīng)用多了一些配置項(xiàng)。
七、運(yùn)行Flutter項(xiàng)目
運(yùn)行Flutter項(xiàng)目，在Android Studio和VS Code沒(méi)什么區(qū)別，下面用VS Code的面板簡(jiǎn)單介紹一下。
1.運(yùn)行到macOS
面板右上角，Run -> Start Debugging，直接運(yùn)行到macOS。
2.運(yùn)行到Chrome
3.運(yùn)行到iOS模擬器
終端輸入指令打開(kāi)模擬器，或者在設(shè)備管理列表選擇啟動(dòng)，當(dāng)然手動(dòng)打開(kāi)模擬器APP都行。
$ open -a Simulator
cd到flutter項(xiàng)目根目錄，使用flutter run命令運(yùn)行項(xiàng)目。也可以Run -> Start Debugging運(yùn)行項(xiàng)目。
$ flutter run
4.運(yùn)行到Android模擬器
查看設(shè)備列表，其中Nexus和Pixel就是Studio中安裝的模擬器。剛打開(kāi)VS Code時(shí)，這兩個(gè)模擬器狀態(tài)都是“Offline”，選擇后模擬器就開(kāi)始啟動(dòng)。模擬器狀態(tài)會(huì)變成“Availabel”，就可以直接在設(shè)備上運(yùn)行了。
5.運(yùn)行到夜神模擬器
1).安裝夜神模擬器for mac
應(yīng)用程序中，右鍵夜神模擬器，顯示包內(nèi)容。找到Contents中的MacOS目錄，然后終端cd到目錄，執(zhí)行如下命令連接模擬器。
$ adb connect 127.0.0.1:62001
發(fā)現(xiàn)會(huì)提示-bash: adb: command not found，那是因?yàn)槲覀冞€沒(méi)有配置過(guò)Android環(huán)境變量。
2).配置Android環(huán)境變量
I.打開(kāi)終端執(zhí)行如下命令，創(chuàng)建.bash_profile文件，若已經(jīng)創(chuàng)建過(guò)，則無(wú)不會(huì)再次創(chuàng)建。
$ touch .bash_profileII.打開(kāi)文件進(jìn)行編輯
$ open -e .bash_profile將下面的內(nèi)容粘貼到.bash_profile文件的后面
export ANDROID_HOME=自己sdk路徑從Android Studio獲取
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
III.終端輸入如下命令更新
$ source .bash_profileIV.重新cd /Applications/NoxAppPlayer.app/Contents/MacOS驗(yàn)證adb是否配置完成
V.電腦重啟或者退出終端后，可能會(huì)再次出現(xiàn)adb: command not found，重新執(zhí)行$ source .bash_profile命令，adb又能使用。
$ source .bash_profile3).運(yùn)行效果
Android環(huán)境變量配置完成后，重啟夜神模擬器，我們能在設(shè)備列表中看到它。選擇模擬器，運(yùn)行效果如下。
6.運(yùn)行到Android真機(jī)
手機(jī)打開(kāi)USB調(diào)試連接計(jì)算機(jī)
-
打開(kāi)“設(shè)置”找到“關(guān)于手機(jī)”進(jìn)入，連續(xù)點(diǎn)擊版本號(hào)，直到提示“您已經(jīng)進(jìn)入開(kāi)發(fā)者模式”。
-
回到“設(shè)置”找到“系統(tǒng)與更新”進(jìn)入，再進(jìn)入“開(kāi)發(fā)者選項(xiàng)”，打開(kāi)USB調(diào)試。
-
用數(shù)據(jù)線(xiàn)連接手機(jī)和電腦，在彈出框中選擇“文件傳輸”，再允許這臺(tái)計(jì)算機(jī)進(jìn)行調(diào)試。
然后在VS Code設(shè)備管理中選擇對(duì)應(yīng)手機(jī)直接運(yùn)行就可以了。
注意：不同廠商流程會(huì)有區(qū)別，介紹這個(gè)流程打不開(kāi)時(shí)，可以去網(wǎng)上查詢(xún)一下。強(qiáng)調(diào)一下，不要使用三無(wú)數(shù)據(jù)線(xiàn)，這樣是不會(huì)再手機(jī)上彈窗的。
7.運(yùn)行到iPhone真機(jī)
1).手機(jī)打開(kāi)開(kāi)發(fā)者模式
-
進(jìn)入 設(shè)置 -> 通用 -> 關(guān)于本機(jī) 頁(yè)面，連續(xù)點(diǎn)擊版本號(hào)。會(huì)彈窗，要求輸入鎖屏密碼。
-
上面完成驗(yàn)證后，設(shè)置中會(huì)出現(xiàn)開(kāi)發(fā)者選項(xiàng)。
-
進(jìn)入開(kāi)發(fā)者選項(xiàng)，開(kāi)啟開(kāi)發(fā)者模式。
如果您的 iPhone 版本號(hào)無(wú)法多次點(diǎn)擊以啟用開(kāi)發(fā)者模式，這可能是因?yàn)槟?iPhone 型號(hào)或 iOS 版本不支持通過(guò)多次點(diǎn)擊版本號(hào)來(lái)激活開(kāi)發(fā)者選項(xiàng)。在某些情況下，特定的 iPhone 型號(hào)可能需要使用不同的方法來(lái)啟用開(kāi)發(fā)者模式。以下是一些備選方法：
使用搜索功能：在設(shè)置應(yīng)用程序中使用搜索功能來(lái)查找開(kāi)發(fā)者選項(xiàng)。在主屏幕上向下滑動(dòng)以展開(kāi)搜索欄，然后輸入 "開(kāi)發(fā)者選項(xiàng)" 或類(lèi)似的關(guān)鍵詞進(jìn)行搜索。這可能會(huì)直接顯示開(kāi)發(fā)者選項(xiàng)菜單或相關(guān)設(shè)置。
使用配置文件：有時(shí)，您可以通過(guò)安裝特定的配置文件來(lái)啟用開(kāi)發(fā)者模式。這些配置文件可以通過(guò)開(kāi)發(fā)者網(wǎng)站或第三方開(kāi)發(fā)者工具提供。在安裝配置文件后，您可以在設(shè)置中找到開(kāi)發(fā)者選項(xiàng)。
使用 Xcode：如果您具有 Mac 計(jì)算機(jī)和 Xcode 開(kāi)發(fā)環(huán)境，您可以通過(guò)連接 iPhone 到 Mac，并在 Xcode 中進(jìn)行相應(yīng)設(shè)置來(lái)啟用開(kāi)發(fā)者模式。在 Xcode 中，選擇您的 iPhone 設(shè)備，然后在設(shè)置中進(jìn)行所需的配置。
2).此時(shí)直接運(yùn)行會(huì)報(bào)錯(cuò)
數(shù)據(jù)線(xiàn)連接iPhone手機(jī)，VS Code設(shè)備管理中會(huì)出現(xiàn)iPhone設(shè)備，現(xiàn)在直接運(yùn)行項(xiàng)目到iPhone會(huì)報(bào)錯(cuò)，因?yàn)楫?dāng)前使用的包名“com.example.flutterDemo”還沒(méi)配置。
3).到開(kāi)發(fā)者網(wǎng)站注冊(cè)App ID（Bundle ID/包名）
到蘋(píng)果開(kāi)發(fā)者網(wǎng)站，登錄開(kāi)發(fā)者賬號(hào)。然后進(jìn)入“標(biāo)識(shí)符（identifiers）”頁(yè)面，點(diǎn)擊添加，注冊(cè)一個(gè)包名（Bundle ID）。 上一步提示的“com.example.flutterDemo”包名已經(jīng)被其他開(kāi)發(fā)者占用了，這里我就隨便創(chuàng)建一個(gè)“com.example.gaminFlutterDemo”，用來(lái)演示。
沒(méi)有開(kāi)開(kāi)發(fā)者賬號(hào)，就需要去申請(qǐng)，注冊(cè)個(gè)人類(lèi)型開(kāi)發(fā)者賬號(hào)，注冊(cè)公司類(lèi)型開(kāi)發(fā)者賬號(hào)。
注意：包名創(chuàng)建后是可以刪除的，但有一個(gè)前提，就是不能手賤提前將IPA上傳到appstoreconnect。
比如，為其它公司開(kāi)發(fā)APP時(shí)，若對(duì)方開(kāi)發(fā)者賬號(hào)遲遲不下來(lái)，而很多功能又是基于包名，那么可以先將包名注冊(cè)在自己公司的開(kāi)發(fā)者賬號(hào)上，不至于卡住開(kāi)發(fā)和測(cè)試。等對(duì)方的開(kāi)發(fā)賬號(hào)下來(lái)，我們?cè)賹麆h掉，重新添加到對(duì)方的賬號(hào)上面去，就可以順利完成過(guò)度。如果，用某個(gè)Bundle ID將IPA上傳到了appstoreconnect，那么這個(gè)Bundle ID就無(wú)法從這個(gè)賬號(hào)上刪除了。
確定包名后，我們?cè)陧?xiàng)目中全局將com.example.flutterDemo替換為com.example.gaminFlutterDemo。這里不修改也沒(méi)事，這里不改的話(huà)就下一步去Xcode中修改，都一樣。
開(kāi)發(fā)者網(wǎng)站，還可處理一些其他配置。比如添加測(cè)試手機(jī)、配置簽名等，這里就不詳細(xì)說(shuō)在網(wǎng)站上如何操作了，推薦到時(shí)打開(kāi)Xcode時(shí)自動(dòng)注冊(cè)設(shè)備和自動(dòng)管理簽名。
4).使用Xcode打開(kāi)Flutter工程iOS目錄下的Runner.xcworkspace文件
打開(kāi)項(xiàng)目后，按步驟進(jìn)入Signing，我們會(huì)發(fā)現(xiàn)紅色的報(bào)錯(cuò)。
解決上面的問(wèn)題，我們先要進(jìn)入Xcode -> Preferences -> Accounts 添加開(kāi)發(fā)者賬號(hào)。
然后回到Siging，先將“Automatically manage signing”開(kāi)關(guān)打開(kāi)，然后將Team對(duì)應(yīng)的開(kāi)發(fā)者賬號(hào)切換為和com.example.gaminFlutterDemo對(duì)應(yīng)的賬號(hào)。這樣，問(wèn)題就解決了，可以運(yùn)行項(xiàng)目了。
新iPhone第一次做真機(jī)調(diào)試，最好先在Xcode運(yùn)行一次，以便設(shè)備信任和自動(dòng)注冊(cè)設(shè)備到開(kāi)發(fā)者賬號(hào)上。不然的話(huà)，就去開(kāi)發(fā)者網(wǎng)站的devices目錄，添加設(shè)備ID。
先在Xcode選擇真機(jī)，然后點(diǎn)擊運(yùn)行，真機(jī)運(yùn)行效果如下。
5).真機(jī)運(yùn)行效果
關(guān)閉Xcode，我們回到VS Code。iPhone用數(shù)據(jù)線(xiàn)連接Mac后，我們?cè)赩S Code選擇iPhone直接運(yùn)行。
運(yùn)行時(shí)，會(huì)有個(gè)關(guān)于“iproxy”的彈窗，會(huì)導(dǎo)致運(yùn)行卡主。我們需要進(jìn)入 系統(tǒng)偏好設(shè)置 -> 安全性與隱私 選擇允許。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-773802.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-773802.html
到了這里，關(guān)于Mac電腦Android Studio和VS Code配置Flutter開(kāi)發(fā)環(huán)境（圖文超詳細(xì)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
