Flutter簡(jiǎn)介

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

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

系統(tǒng)要求
要安裝并運(yùn)行Flutter，您的開(kāi)發(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

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

//執(zhí)行命令
open ~/.bash_profile
//在打開(kāi)的配置文件中，添加下面文件，注意最下面那個(gè)路徑要改成你下載好的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進(jìn)入到你下載好Flutter的路徑，如筆者是/Users/moxuyou/flutter，接著執(zhí)行flutter doctor命令。這時(shí)候會(huì)下載您可能需要安裝的剩余依賴項(xiàng)（時(shí)間比較長(zhǎng)）。
在上面執(zhí)行完成之后，一般的錯(cuò)誤會(huì)是xcode或Android Studio版本太低、或者沒(méi)有ANDROID_HOME環(huán)境變量等，請(qǐng)按照提示解決。本機(jī)執(zhí)行flutter doctor命令后提示老版本，需更新至最新版本。
執(zhí)行flutter upgrade可以升級(jí)flutter sdk。該命令會(huì)同時(shí)更新Flutter SDK和你的flutter項(xiàng)目依賴包。如果你只想更新項(xiàng)目依賴包（不包括Flutter SDK），可以使用如下命令：
flutter packages get獲取項(xiàng)目所有的依賴包。
flutter packages upgrade 獲取項(xiàng)目所有依賴包的最新版本。

接下來(lái)安裝Android Studio，過(guò)程在此不一描述，參考

3.Android Studio配置Flutter環(huán)境

• 啟動(dòng)Android Studio.
• 打開(kāi)插件首選項(xiàng) (Preferences>Plugins,Marketplace)或者快捷鍵comment , ，找到Plugins>Marketplace.

• 搜索Flutter找到插件并點(diǎn)擊 install安裝。

  
  
  安裝Flutter插件.png

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

配置Flutter路徑.png

配置Dark路徑.png

創(chuàng)建Flutter項(xiàng)目.png

運(yùn)行Flutter項(xiàng)目.png

第一次運(yùn)行項(xiàng)目.png

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

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

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

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

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

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

  xcode賬號(hào)

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

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

  添加信任

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

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

  驗(yàn)證bundle id是否唯一

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

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

VS Code安裝flutter插件

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

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

創(chuàng)建Flutter應(yīng)用

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

體驗(yàn)熱重載

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

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

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

連接Android模擬器

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

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

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

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

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

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

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

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

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

連接Android真機(jī)設(shè)備

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

1. 在Android設(shè)備上啟用 開(kāi)發(fā)人員選項(xiàng) 和 USB調(diào)試 。詳細(xì)說(shuō)明可在Android文檔中找到。
2. 使用USB將手機(jī)插入電腦。如果設(shè)備出現(xiàn)調(diào)試授權(quán)提示，請(qǐng)授權(quán)你的電腦可以訪問(wèn)該設(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è)置為相應(yīng)的SDK安裝目錄。

連接iOS模擬器

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

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

   open -a Simulator
   
   

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

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

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