摘要：在本文中，我們將帶大家進一步了解的搭建與運行。操作系統或更高版本磁盤空間工具依賴或更新的版本和命令行工具這些命令行工具。運行應用程序定位到工具欄在中選擇一個運行該應用的設備。

作者：個推iOS開發工程師 伊澤瑞爾

Flutter是Google推出的跨平臺的解決方案，用以幫助開發者在 Android 和 iOS 兩個平臺開發高質量原生應用的全新移動 UI 框架。 之前我們為大家介紹了《跨平臺框架Flutter的優勢與結構》，概括了Flutter選擇Dart語言的必要性及其自底而上的框架結構，大家可以點擊標題鏈接來回顧前文。在本文中，我們將帶大家進一步了解Flutter的搭建與運行。

一、系統環境要求：要安裝并運行Flutter，開發環境必須滿足以下條件。

操作系統：Windows 7或更高版本（64-bit）；

磁盤空間：400MB；

工具：Flutter依賴PowerShell 5.0或更新的版本和Git for Windows（Git命令行工具）這些命令行工具。

我們可以去Flutter官網下載最新可用的安裝包。

下載地址：

https://flutter.io/sdk-archive/#windows

注意：Flutter的渠道變動頻繁，請以官網為準。同時，我們也推薦去Flutter github項目下下載安裝包。

下載地址：

https://github.com/flutter/flutter/releases

下載完成后，請先將安裝包zip解壓到想安裝Flutter SDK的路徑（注意：不要將Flutter安裝到需要高權限的路徑，如 C:Files)。之后，在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行。

二、更新環境變量：若想在Windows系統自帶命令行運行flutter命令，開發者需要添加以下環境變量到用戶PATH：“控制面板->用戶賬戶->更改我的環境變量”，同時，在“用戶變量”下檢查是否有名為“Path”的條目：如果該條目存在，追加flutter bin的全路徑，使用；作為分隔符。如果該條目不存在，創建一個新用戶變量Path，然后將flutter bin的全路徑作為它的值。Flutter的執行需要聯網，還需要設置：

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

三、運行flutter doctor命令：開發者需在Flutter命令行運行flutter doctor命令來查看是否需要安裝其它依賴，如果需要，則進行安裝。在終端中輸入flutter doctor，如果出現和下圖類似的結果，甚至得到的x比圖示更多，主要原因是沒有安裝Android studio。下面我們將列出Android Studio的安裝步驟。

四、Android Studio的安裝：

在官網下載Android Studio，下載地址：https://developer.android.com/；

啟動Android Studio，執行“Android Studio安裝向導”并安裝最新的Android SDK、Android SDK工具和Android SDK構建工具，這些都是用Flutter進行Android開發所需要的；

打開Android Studio軟件，找到Plugin的配置，搜索Flutter插件，出現如圖所示頁面。點擊中間“Search in repositories”，然后點擊安裝，全部安裝完成后需重啟。

五、安裝Android證書

安裝好Android Studio后，再次打開終端（命令行），輸入flutter doctor，這時x的數量會明顯減少，但可能還是會遇到1-2個，如果只有1個就說明沒有安裝證書，開發者只需在終端里執行以下命令即可：

flutter doctor --android-licenses

當提示Y/N選擇時，請直接選擇Y即可完成安裝。

02Flutter開發環境搭建（Mac版）

一、系統環境要求：要安裝并運行Flutter，開發環境必須滿足以下條件。

操作系統： MacOS（64-bit）；

磁盤空間：大于700M，如果算上Android Studio等編輯工具，盡量大于3G；

命令行工具：bash、mkdir、rm、git、curl、unzip、which、brew。

二、下載Flutter SDK包：

推薦在官網下載，網址：https://flutter.io/setup-macos/ 。

下載完成后，解壓安裝包到想安裝的目錄，如:cd ~/development

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

三、配置環境變量

壓縮包下載好以后，選擇位置進行解壓，壓縮包解壓的位置在下面配置環境變量的時候仍要使用。

首先打開終端工具，使用vim進行配置環境變量，命令如下：

vim ~/.bash_profile

然后，在打開的文件里增加一行代碼，配置flutter命令，使其在任何地方都可以使用。添加的代碼為：

export PATH=/app/flutter/bin:$PATH

這行命令需要根據壓縮包解壓的位置來進行編寫，內容是你的路徑。配置完成后，還需用source命令重新加載，具體命令如下:

source ~/.bash_profile

完成以后， flutter的安裝工作已基本完成，但要進行開發，還需要使用命令來檢測其是否成功安裝。

四、檢查開發環境：如上圖所示，已經成功安裝了Flutter，但是還不具備開發環境，可以用flutter doctor命令來檢查還需安裝的插件和軟件。

五、安裝Xcode：要為iOS開發Flutter應用程序，需要Xcode9.0或更高版本。

在蘋果商店安裝Xcode 9.0或更新版本。

配置Xcode命令行工具以使用新安裝的Xcode版本，命令如下：

sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer

在大多數的情況下，當你想要使用最新版本的Xcode時，這是正確的路徑。如果需要使用不同版本的Xcode，請指定相應的路徑。

確保Xcode許可協議是通過打開一次Xcode或通過命令sudo xcodebuild –license 。

六、安裝Android Studio：和Windows一樣，在Android設備上構建并運行Flutter程序都需要先安裝Android Studio。

03升級Flutter

Flutter SDK有多個分支，如beta、dev、master、stable，其中stable為穩定分支，dev和master為開發分支。flutter安裝完成后，可以運行flutter channel，查看所有分支。

若想升級flutter SDK，需要執行命令：flutter upgrade 。

該命令會同時更新Flutter SDK和flutter項目依賴包。若只更新項目依賴包（不包括Flutter SDK），可以使用以下命令：

flutter packages get 獲取項目所有的依賴包。
flutter packages upgrades 獲取項目所有依賴包的最新版本。

04開發工具的配置與使用

一、Android studio配置與使用

首先需要安裝兩個插件，分別是Flutter和Dart插件：

Flutter插件：支持Flutter開發工作流(運行、調試、熱重載等)；

Dart插件：提供代碼分析(輸入代碼時進行驗證、代碼補全等)。

1.安裝步驟

啟動Android Studio；

打開插件首選項 （MacOS：Preferences>Plugins, Windows：File>Settings>Plugins）；

先選擇 Browse repositories…，再選擇 flutter 插件并點擊 install；

重啟Android Studio后插件生效。

2.創建Flutter應用

選擇 File>New Flutter Project ；

選擇 Flutter application 作為 project 類型, 然后點擊 Next；

輸入項目名稱 (如 myapp)，點擊 Next；

點擊 Finish；

等待Android Studio安裝SDK并創建項目。

3.運行應用程序

定位到Android Studio工具欄；

在 target selector 中, 選擇一個運行該應用的Android設備。如果沒有列出可用，請選擇 Tools>Android>AVD Manager 創建；

在工具欄中點擊 Run圖標；

如果一切正常,在設備或模擬器上會看到啟動的應用程序，如下圖所示：

4.體驗熱重載：Flutter可以通過熱重載實現快速的開發周期，熱重載無需重啟應用程序就能實時加載修改后的代碼，并且不會丟失狀態。對代碼進行簡單的更改，然后使用IDE或命令行工具進行重新加載，可以在設備或模擬器上看到更改。

打開`lib/main.dart`文件；

將字符串`"You have pushed the button this many times:"` 更改為`"You have clicked the button this many times:"`；

不要按“停止”按鈕，讓應用繼續運行；

要查看更改，請調用 **Save** (`cmd-s` / `ctrl-s`)，或者點擊 **熱重載按鈕** (帶有閃電圖標的按鈕)。

二、VS Code的配置與使用

1.安裝flutter插件：

啟動VS Code；

調用View>Command Palette...；

輸入"install"后選擇Extensions:Install Extension action；

在搜索框輸入flutter，在搜索結果列表中選擇"Flutter"并點擊Install；

選擇"OK"并重新啟動VS Code；

驗證配置：首先，調用View>Command Palette...，輸入"doctor"，然后選擇"Flutter:Run Flutter Doctor"action。查看“OUTPUT”窗口中的輸出是否有問題。

2.創建Flutter應用

啟動VS Code；

調用View>Command Palette...；

輸入"flutter"后選擇"Flutter:New Project"action；

輸入Project名稱(如myapp)并按回車鍵；

指定防止項目的位置，然后確認；

等待項目創建繼續，并顯示main.dart文件。

3.體驗熱重載

用VSCode編寫Flutter的缺點之一是需要手動加載更新應用，這在一定程度上影響了工作效率。當我們運行flutter run以后，會出現一段紅色的文字提示，如下所示：

r 鍵：點擊后熱加載，即重新加載；

p 鍵：顯示網格，可以掌握布局情況；

o 鍵：切換Android和iOS的預覽模式；

q 鍵：退出調試預覽模式。

4.寫一個HelloWorld程序

當我們搭建好開放環境搭后，按照慣例我們需要寫一個HelloWorld程序。 將下面這段代碼寫在根目錄.dart文件中，作為Flutter主文件。

import "package:flutter/material.dart";
//主函數（入口函數），下面我會簡單說說Dart的函數
void main() =>runApp(MyApp());
// 聲明MyApp類
class MyApp extends StatelessWidget{
//重寫build方法
@override
Widget build(BuildContext context){
//返回一個Material風格的組件
return MaterialApp(
title:"Welcome to Flutteraa",
home:Scaffold(
//創建一個Bar，并添加文本
appBar:AppBar(
title:Text("Welcome to Flutter"),
),
//在主體的中間區域，添加一個hello world 的文本
body:Center(
child:Text("Hello World"),
),
),
);
}
}

結果如下圖所示：

05連接設備運行Flutter應用

Window下只支持為Android設備構建并運行Flutter應用，而macOS同時支持iOS和Android設備。下面將分別介紹如何連接Android和iOS設備來運行flutter應用。

一、連接Android模擬器

在Android模擬器上運行并測試Flutter應用，請按照以下步驟操作：

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

選擇一個設備并選擇 Next；

為要模擬的Android版本選擇一個或多個系統印象，然后選擇 Next。建議使用 x86 或 x86_64 image；

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

驗證AVD配置是否正確，然后選擇 Finish；

在“Android Virtual Device Manager”中，點擊工具欄的 Run。模擬器啟動并顯示所選操作系統版本或設備的啟動畫面；

運行 flutter run 啟動您的設備。連接的設備名是 Android SDK built for ，其中 platform 是芯片系列，如 x86。

二、連接Android真機設備

要準備在Android設備上運行并測試Flutter應用，需要Android 4.1或更高版本的Android設備。

在Android設備上啟用開發人員選項和USB調試；

使用USB將手機插入電腦。如果設備出現調試授權提示，請授權你的電腦可以訪問該設備；

在命令行運行 flutter devices 命令以驗證Flutter識別您連接的Android設備；

運行啟動你應用程序 flutter run。

三、連接iOS模擬器

要準備在iOS模擬器上運行并測試Flutter應用，請按以下步驟操作：

在你的MAC上，通過 Spotlight 或以下命令找到模擬器:open -a Simulator；

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

根據電腦屏幕大小，模擬高清屏iOS設備可能會溢出屏幕。可以在模擬器的 Window> Scale 菜單下設置設備比例；

運行 flutter run，啟動flutter應用程序。

四、連接iOS真機設備

如果要將Flutter應用安裝到iOS真機設備，除了需要一些額外的工具和一個Apple賬戶，還需要在Xcode中進行一些設置。

1.安裝homebrew(如果已經安裝了brew，跳過此步驟)；

2.打開終端并運行如下這些命令：
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
如果這些命令中的任何一個失敗并出現錯誤，需要運行brew doctor并按照說明解決問題

3.遵循Xcode簽名流程來配置項目：

在你Flutter項目目錄中通過open ios/Runner.xcworkspace打開默認的Xcode workspace。

在Xcode中，選擇導航面板左側中的Runner項目。
在Runner target設置頁面中，確保在General > Signing > Team下選擇你的開發團隊。當你選擇一個團隊時，Xcode會創建并下載開發證書，向你的設備注冊你的賬戶，并創建和下載配置文件。

如果要開始你的第一個iOS開發項目，需要使用你的Apple ID登錄Xcode。任何Apple ID都支持開發和測試，但若想將應用分發到App Store，就必須注冊Apple開發者計劃。

當你第一次使用attach真機設備進行iOS開發時，需要同時信任你的Mac和該設備上的開發證書。iOS設備首次連接到Mac時，選擇信任。然后轉到iOS設備上的設置菜單，選擇常規>設備管理并信任您的證書。

運行flutter run，啟動flutter應用程序。

個推技術團隊基于Flutter平臺也進行了不少開發和探索，其中消息推送插件Getui Flutter Plugin，作為一個特殊的Package，可以為Android和iOS提供底層封裝，在Flutter底層提供組件功能，使Flutter可以較為方便地調用Native模塊。借助Getui Flutter Plugin，開發者可以快速構建穩定高效的消息推送系統，滿足日常的工作需求。

下載鏈接：

https://github.com/GetuiLaboratory/getui-flutter-plugin