Mac電腦Flutter開發(fā)環(huán)境搭建

Flutter簡介

Flutter 是 Google推出并開源的移動應(yīng)用開發(fā)框架，主打跨平臺、高保真、高性能。開發(fā)者可以通過 Dart語言開發(fā) App，一套代碼同時運行在 iOS 和 Android平臺。 Flutter提供了豐富的組件、接口，開發(fā)者可以很快地為 Flutter添加 native擴展。同時 Flutter還使用 Native引擎渲染視圖，這無疑能為用戶提供良好的體驗。

本文大部分是參考自Flutter官網(wǎng) 和Flutter中文網(wǎng)配套自己的親自實踐

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

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

bash、mkdir、rm、git、curl、unzip、which

1.安裝Flutter

下載地址: https://flutter.dev/docs/get-started/install/macos

下載Flutter.png

下載到一個適合的路徑，筆者是放到了個人Users路徑下。

2.添加flutter相關(guān)工具到path中
//執(zhí)行命令
open ~/.bash_profile
//在打開的配置文件中，添加下面文件，注意最下面那個路徑要改成你下載好的flutter的路徑
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/moxuyou/flutter/bin:$PATH

保存退出，完成上面操作之后，執(zhí)行

//1.刷新當(dāng)前終端窗口
source $HOME/.bash_profile
//2.查看Flutter配置是否已經(jīng)在PATH環(huán)境變量
echo $PATH

之后cd進入到你下載好Flutter的路徑，如筆者是/Users/moxuyou/flutter，接著執(zhí)行flutter doctor命令。這時候會下載您可能需要安裝的剩余依賴項（時間比較長）。
在上面執(zhí)行完成之后，一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。本機執(zhí)行flutter doctor命令后提示老版本，需更新至最新版本。
執(zhí)行flutter upgrade可以升級flutter sdk。該命令會同時更新Flutter SDK和你的flutter項目依賴包。如果你只想更新項目依賴包（不包括Flutter SDK），可以使用如下命令：
flutter packages get獲取項目所有的依賴包。
flutter packages upgrade 獲取項目所有依賴包的最新版本。

接下來安裝Android Studio，過程在此不一描述，參考

3.Android Studio配置Flutter環(huán)境
  • 啟動Android Studio.
  • 打開插件首選項 (Preferences>Plugins,Marketplace)或者快捷鍵comment , ，找到Plugins>Marketplace.

  • 搜索Flutter找到插件并點擊 install安裝。


    安裝Flutter插件.png

在安裝完成之后，重啟Android Studio后插件生效.
接下來配置Android Studio的Flutter路徑：

配置Flutter路徑.png

接下來配置配置Android Studio的Dart SDK路徑
配置Dark路徑.png

在上面環(huán)境都配置完成之后，我們就可以創(chuàng)建我們第一個Flutter項目了。
創(chuàng)建Flutter項目.png

運行項目：
運行Flutter項目.png

體驗熱重載
1.打開lib/main.dart文件。
2.將字符串 'You have pushed the button this many times:' 更改為 'You have click the button this many times:'。
3.不要按“停止”按鈕; 直接點擊那個??按鈕，讓您的應(yīng)用繼續(xù)運行，并刷新顯示出效果。
熱重載能大大的減少我們的開發(fā)時間，以后調(diào)UI不需要要重新跑一遍項目，修改完成之后立馬出效果。
下面是運行的效果：
第一次運行項目.png

如果你想運行真機，你需要依次執(zhí)行下面的命令行：

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

iOS設(shè)備需要配置證書。
下面直接拷貝自Flutter中文文檔。

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

  • 在Xcode中，選擇導(dǎo)航面板左側(cè)中的Runner項目。

  • 在Runner target設(shè)置頁面中，確保在 General > Signing > Team 下選擇了你的開發(fā)團隊。當(dāng)你選擇一個團隊時，Xcode會創(chuàng)建并下載開發(fā)證書，向你的設(shè)備注冊你的帳戶，并創(chuàng)建和下載配置文件（如果需要）。

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

    xcode賬號

    任何Apple ID都支持開發(fā)和測試，但若想將應(yīng)用分發(fā)到App Store，就必須注冊Apple開發(fā)者計劃，有關(guān)詳情讀者可以自行了解。

  • 當(dāng)您第一次attach真機設(shè)備進行iOS開發(fā)時，需要同時信任你的Mac和該設(shè)備上的開發(fā)證書。首次將iOS設(shè)備連接到Mac時，請在對話框中選擇 Trust。

    添加信任

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

  • 如果Xcode中的自動簽名失敗，請驗證項目的 General > Identity > Bundle Identifier 值是否唯一.

    驗證bundle id是否唯一

  • 運行 flutter run啟動flutter應(yīng)用程序（如果有多個運行設(shè)備，則需要運行命令flutter run -d 設(shè)備名）。

至此一個基本的flutter項目就配置完成了。除了Android Studio，F(xiàn)lutter還支持VSCode開發(fā)，下面再介紹下VSCode環(huán)境下創(chuàng)建/運行Flutter項目

VS Code安裝flutter插件

1.VS Code請自行安裝，安裝完成之后啟動 VS Code。
2.調(diào)用 View>Command Palette…。
3.輸入 ‘install’, 然后選擇 Extensions: Install Extension action。
4.在搜索框輸入 flutter ，在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點擊 Install。
5.選擇 ‘OK’ 重新啟動 VS Code。
6.驗證配置

  • 調(diào)用 View>Command Palette…
  • 輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action。
  • 查看“OUTPUT”窗口中的輸出是否有問題
創(chuàng)建Flutter應(yīng)用

1.啟動 VS Code
2.調(diào)用 View>Command Palette…
3.輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
4.輸入 Project 名稱 (如myapp), 然后按回車鍵
5.指定放置項目的位置，然后按藍色的確定按鈕
6.等待項目創(chuàng)建繼續(xù)，并顯示main.dart文件

體驗熱重載

1.打開lib/main.dart文件。
2.將字符串 'You have pushed the button this many times:' 更改為 'You have clicked the button this many times:'。
3.不要按“停止”按鈕; 讓您的應(yīng)用繼續(xù)運行。
4.要查看您的更改，請調(diào)用 Save (cmd-s / ctrl-s), 或者點擊 熱重載按鈕 (綠色圓形箭頭按鈕)。
你會立即在運行的應(yīng)用程序中看到更新的字符串。

連接設(shè)備運行Flutter應(yīng)用

Window下只支持為Android設(shè)備構(gòu)建并運行Flutter應(yīng)用，而macOS同時支持iOS和Android設(shè)備。下面分別介紹如何連接Android和iOS設(shè)備來運行flutter應(yīng)用。

連接Android模擬器

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

  1. 啟動 Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device.

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

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

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

  5. 驗證AVD配置是否正確，然后選擇 Finish。

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

  6. 在“Android Virtual Device Manager”中，點擊工具欄的 Run。模擬器啟動并顯示所選操作系統(tǒng)版本或設(shè)備的啟動畫面。

  7. 運行 flutter run 啟動您的設(shè)備。 連接的設(shè)備名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

連接Android真機設(shè)備

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

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

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

連接iOS模擬器

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

  1. 在你的MAC上，通過 Spotlight 或以下命令找到模擬器：

    open -a Simulator

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

  3. 根據(jù)你電腦屏幕大小，模擬高清屏iOS設(shè)備可能會溢出屏幕?？梢栽谀M器的 Window> Scale 菜單下設(shè)置設(shè)備比例。

  4. 運行 flutter run啟動flutter應(yīng)用程序。

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

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