Flutter 環(huán)境搭建 for Mac

Mac 設(shè)置環(huán)境變量

a. /etc/profile 
b. /etc/paths 
c. ~/.bash_profile 
d. ~/.bash_login 
e. ~/.profile 
f. ~/.bashrc

其中a和b是系統(tǒng)級(jí)別的，系統(tǒng)啟動(dòng)就會(huì)加載，其余是用戶接別的。c,d,e按照從前往后的順序讀取，如果c文件存在，則后面的幾個(gè)文件就會(huì)被忽略不讀了，以此類推。~/.bashrc沒有上述規(guī)則，它是bash shell打開的時(shí)候載入的。

1、輸入vim ./.bash_profile 確定enter，然后就打開了bash_profile文件


WX20200607-091724@2x.png

筆者已經(jīng)添加兩個(gè)環(huán)境變量
按下i 鍵進(jìn)入編輯狀態(tài)，添加環(huán)境變量后輸入 :wq保存并退出
如果出現(xiàn)E45: 'readonly' option is set (add ! to override) ，是權(quán)限問題，輸入:wq!強(qiáng)制退出即可

下載并安裝FlutterSDK

使用鏡像

由于在國(guó)內(nèi)訪問Flutter有時(shí)可能會(huì)受到限制，F(xiàn)lutter官方為中國(guó)開發(fā)者搭建了臨時(shí)鏡像，將如下環(huán)境變量加入到用戶環(huán)境變量中：

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

注意： 此鏡像為臨時(shí)鏡像，并不能保證一直可用，讀者可以參考詳情請(qǐng)參考 Using Flutter in China 以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。

系統(tǒng)要求

要安裝并運(yùn)行Flutter，您的開發(fā)環(huán)境必須滿足以下最低要求:

  • 操作系統(tǒng): macOS (64-bit)
  • 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）.
  • 工具: Flutter 依賴下面這些命令行工具.
    • bash, mkdir, rm, git, curl, unzip, which

獲取Flutter SDK

  1. 去flutter官網(wǎng)下載其最新可用的安裝包，轉(zhuǎn)到下載頁(yè) 。

    注意，F(xiàn)lutter的渠道版本會(huì)不停變動(dòng)，請(qǐng)以Flutter官網(wǎng)為準(zhǔn)。另外，在中國(guó)大陸地區(qū)，要想正常獲取安裝包列表或下載安裝包，可能需要翻墻，讀者也可以去Flutter github項(xiàng)目下去下載安裝包，轉(zhuǎn)到下載頁(yè) 。

  2. 解壓安裝包到你想安裝的目錄，如：

    cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

  3. 添加flutter相關(guān)工具到path中：

    export PATH=`pwd`/flutter/bin:$PATH

    此代碼只能暫時(shí)針對(duì)當(dāng)前命令行窗口設(shè)置PATH環(huán)境變量，要想永久將Flutter添加到PATH中請(qǐng)參考下面更新環(huán)境變量 部分。

注意： 由于一些flutter命令需要聯(lián)網(wǎng)獲取數(shù)據(jù)，如果您是在國(guó)內(nèi)訪問，由于眾所周知的原因，直接訪問很可能不會(huì)成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google為國(guó)內(nèi)開發(fā)者搭建的臨時(shí)鏡像。詳情請(qǐng)參考 Using Flutter in China

要更新現(xiàn)有版本的Flutter，請(qǐng)參閱升級(jí)Flutter。

運(yùn)行 flutter doctor

運(yùn)行以下命令查看是否需要安裝其它依賴項(xiàng)來完成安裝：

flutter doctor

該命令檢查您的環(huán)境并在終端窗口中顯示報(bào)告。Dart SDK已經(jīng)在捆綁在Flutter里了，沒有必要單獨(dú)安裝Dart。 仔細(xì)檢查命令行輸出以獲取可能需要安裝的其他軟件或進(jìn)一步需要執(zhí)行的任務(wù)（以粗體顯示）

例如:

<pre style="font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; box-sizing: border-box; font-family: SFMono-Regular, Menlo, "Roboto Mono", Monaco, courier, monospace; font-size: 13px; white-space: pre-wrap; display: block; padding: 8px 12px; line-height: 1.428571429; word-break: break-all; word-wrap: break-word; color: rgb(52, 73, 94); background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow-x: auto; margin: 25px 0px !important;">[-] Android toolchain - develop for Android devices
? Android SDK at /Users/obiwan/Library/Android/sdk
? Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
? Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
</pre>

一般的錯(cuò)誤會(huì)是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請(qǐng)按照提示解決。下面貼一個(gè)筆者本機(jī)(mac)的環(huán)境變量配置，您可以對(duì)比修正：

  export PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換為你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次運(yùn)行一個(gè)flutter命令（如flutter doctor）時(shí)，它會(huì)下載它自己的依賴項(xiàng)并自行編譯。以后再運(yùn)行就會(huì)快得多。

以下各部分介紹如何執(zhí)行這些任務(wù)并完成設(shè)置過程。你會(huì)看到在flutter doctor輸出中， 如果你選擇使用IDE，我們提供了，IntelliJ IDEA，Android Studio和VS Code的插件， 請(qǐng)參閱編輯器設(shè)置 以了解安裝Flutter和Dart插件的步驟。

一旦你安裝了任何缺失的依賴，再次運(yùn)行flutter doctor命令來驗(yàn)證你是否已經(jīng)正確地設(shè)置了。

該flutter工具使用Google Analytics匿名報(bào)告功能使用情況統(tǒng)計(jì)信息和基本崩潰報(bào)告。 這些數(shù)據(jù)用于幫助改進(jìn)Flutter工具。Analytics不是一運(yùn)行或在運(yùn)行涉及flutter config的任何命令時(shí)就發(fā)送， 因此您可以在發(fā)送任何數(shù)據(jù)之前退出分析。要禁用報(bào)告，請(qǐng)執(zhí)行flutter config --no-analytics并顯示當(dāng)前設(shè)置，然后執(zhí)行flutter config。 請(qǐng)參閱Google的隱私政策。

更新環(huán)境變量

您在命令行只能更新當(dāng)前會(huì)話的PATH變量，如Clone Flutter repo所示。 但是，您可能需要的是永久更新此變量，以便您可以運(yùn)行flutter命令在任何終端會(huì)話中。

對(duì)于所有終端會(huì)話永久修改此變量的步驟是和特定計(jì)算機(jī)系統(tǒng)相關(guān)的。通常，您會(huì)在打開新窗口時(shí)將設(shè)置環(huán)境變量的命令添加到執(zhí)行的文件中。例如

  1. 確定您Flutter SDK的目錄，您將在步驟3中用到。
  2. 打開(或創(chuàng)建) $HOME/.bash_profile. 文件路徑和文件名可能在您的機(jī)器上不同.
  3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆Flutter的git repo的路徑:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/document/code”

 export PATH=~/document/code/flutter/bin:$PATH
  1. 運(yùn)行 source $HOME/.bash_profile 刷新當(dāng)前終端窗口.

注意: 如果你使用的是zsh，終端啟動(dòng)時(shí) ~/.bash_profile 將不會(huì)被加載，解決辦法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

5.通過運(yùn)行flutter/bin命令驗(yàn)證目錄是否在已經(jīng)在PATH中:

echo $PATH

更多詳細(xì)信息，請(qǐng)參閱this StackExchange question.

編輯器設(shè)置

使用 flutter 命令行工具，您可以使用任何編輯器來開發(fā)Flutter應(yīng)用程序。輸入flutter help在提示符下查看可用的工具。

我們建議使用我們的插件來獲得豐富的IDE體驗(yàn)，支持編輯，運(yùn)行和調(diào)試Flutter應(yīng)用程序。請(qǐng)參閱編輯器設(shè)置了解詳細(xì)步驟

平臺(tái)設(shè)置

macOS支持為iOS和Android開發(fā)Flutter應(yīng)用程序。現(xiàn)在完成兩個(gè)平臺(tái)設(shè)置步驟中的至少一個(gè)，以便能夠構(gòu)建并運(yùn)行您的第一個(gè)Flutter應(yīng)用程序

iOS 設(shè)置

安裝 Xcode

要為iOS開發(fā)Flutter應(yīng)用程序，您需要Xcode 7.2或更高版本:

  1. 安裝Xcode 7.2或更新版本(通過鏈接下載或蘋果應(yīng)用商店).

  2. 配置Xcode命令行工具以使用新安裝的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 對(duì)于大多數(shù)情況，當(dāng)您想要使用最新版本的Xcode時(shí)，這是正確的路徑。如果您需要使用不同的版本，請(qǐng)指定相應(yīng)路徑。

  3. 確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令sudo xcodebuild -license同意過了.

使用Xcode，您可以在iOS設(shè)備或模擬器上運(yùn)行Flutter應(yīng)用程序。

設(shè)置iOS模擬器

要準(zhǔn)備在iOS模擬器上運(yùn)行并測(cè)試您的Flutter應(yīng)用，請(qǐng)按以下步驟操作：

  1. 在Mac上，通過Spotlight或使用以下命令找到模擬器:

    open -a Simulator

  2. 通過檢查模擬器 硬件>設(shè)備 菜單中的設(shè)置，確保您的模擬器正在使用64位設(shè)備（iPhone 5s或更高版本）.

  3. 根據(jù)您的開發(fā)機(jī)器的屏幕大小，模擬的高清屏iOS設(shè)備可能會(huì)使您的屏幕溢出。在模擬器的 Window> Scale菜單下設(shè)置設(shè)備比例

  4. 運(yùn)行 flutter run啟動(dòng)您的應(yīng)用.

安裝到iOS設(shè)備

要將您的Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備，您需要一些額外的工具和一個(gè)Apple帳戶，您還需要在Xcode中進(jìn)行設(shè)置。

  1. 安裝 homebrew （如果已經(jīng)安裝了brew,跳過此步驟）.

  2. 打開終端并運(yùn)行這些命令來安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具

    brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果這些命令中的任何一個(gè)失敗并出現(xiàn)錯(cuò)誤，請(qǐng)運(yùn)行brew doctor并按照說明解決問題.

  1. 遵循Xcode簽名流程來配置您的項(xiàng)目:

    1. 在你Flutter項(xiàng)目目錄中通過 open ios/Runner.xcworkspace 打開默認(rèn)的Xcode workspace.

    2. 在Xcode中，選擇導(dǎo)航面板左側(cè)中的Runner項(xiàng)目

    3. 在Runner target設(shè)置頁(yè)面中，確保在 常規(guī)>簽名>團(tuán)隊(duì) 下選擇了您的開發(fā)團(tuán)隊(duì)。當(dāng)您選擇一個(gè)團(tuán)隊(duì)時(shí)，Xcode會(huì)創(chuàng)建并下載開發(fā)證書，向您的設(shè)備注冊(cè)您的帳戶，并創(chuàng)建和下載配置文件（如果需要）

      • 要開始您的第一個(gè)iOS開發(fā)項(xiàng)目，您可能需要使用您的Apple ID登錄Xcode.


        Xcode account add

        任何Apple ID都支持開發(fā)和測(cè)試。需要注冊(cè)Apple開發(fā)者計(jì)劃才能將您的應(yīng)用分發(fā)到App Store. 查看differences between Apple membership types.

      • 當(dāng)您第一次attach真機(jī)設(shè)備進(jìn)行iOS開發(fā)時(shí)，您需要同時(shí)信任你的Mac和該設(shè)備上的開發(fā)證書。首次將iOS設(shè)備連接到Mac時(shí),請(qǐng)?jiān)趯?duì)話框中選擇 Trust。

        Trust Mac

        然后，轉(zhuǎn)到iOS設(shè)備上的設(shè)置應(yīng)用程序，選擇 常規(guī)>設(shè)備管理 并信任您的證書。

      • 如果Xcode中的自動(dòng)簽名失敗，請(qǐng)驗(yàn)證項(xiàng)目的 General > Identity > Bundle Identifier 值是否唯一.

      Check the app's Bundle ID

  2. 運(yùn)行啟動(dòng)您的應(yīng)用程序 flutter run.

Android設(shè)置

安裝Android Studio

要為Android開發(fā)Flutter應(yīng)用，您可以使用Mac，Windows或Linux（64位）機(jī)器.

Flutter需要安裝和配置Android Studio:

  1. 下載并安裝 Android Studio.

  2. 啟動(dòng)Android Studio，然后執(zhí)行“Android Studio安裝向?qū)А?。這將安裝最新的Android SDK，Android SDK平臺(tái)工具和Android SDK構(gòu)建工具，這是Flutter為Android開發(fā)時(shí)所必需的

設(shè)置您的Android設(shè)備

要準(zhǔn)備在Android設(shè)備上運(yùn)行并測(cè)試您的Flutter應(yīng)用，您需要安裝Android 4.1（API level 16）或更高版本的Android設(shè)備.

  1. 在您的設(shè)備上啟用 開發(fā)人員選項(xiàng) 和 USB調(diào)試 。詳細(xì)說明可在Android文檔中找到。
  2. 使用USB將手機(jī)插入電腦。如果您的設(shè)備出現(xiàn)提示，請(qǐng)授權(quán)您的計(jì)算機(jī)訪問您的設(shè)備。
  3. 在終端中，運(yùn)行 flutter devices 命令以驗(yàn)證Flutter識(shí)別您連接的Android設(shè)備。
  4. 運(yùn)行啟動(dòng)您的應(yīng)用程序 flutter run。

默認(rèn)情況下，F(xiàn)lutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環(huán)境變量設(shè)置為SDK安裝目錄。

設(shè)置Android模擬器

要準(zhǔn)備在Android模擬器上運(yùn)行并測(cè)試您的Flutter應(yīng)用，請(qǐng)按照以下步驟操作：

  1. 在您的機(jī)器上啟用 VM acceleration .

  2. 啟動(dòng) Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device.

  3. 選擇一個(gè)設(shè)備并選擇 Next。

  4. 為要模擬的Android版本選擇一個(gè)或多個(gè)系統(tǒng)映像，然后選擇 Next. 建議使用 x86 或 x86_64 image .

  5. 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬件加速.

  6. 驗(yàn)證AVD配置是否正確，然后選擇 Finish。

    有關(guān)上述步驟的詳細(xì)信息，請(qǐng)參閱 Managing AVDs.

  7. 在 Android Virtual Device Manager中, 點(diǎn)擊工具欄的 Run。模擬器啟動(dòng)并顯示所選操作系統(tǒng)版本或設(shè)備的啟動(dòng)畫面.

  8. 運(yùn)行 flutter run 啟動(dòng)您的設(shè)備. 連接的設(shè)備名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容