淺談跨平臺框架Flutter的搭建與運行

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

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

01Flutter開發環境搭建（Windows版） 1、系統環境要求：要安裝並運行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命令行。

2、更新環境變量：若想在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

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

4、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」，而後點擊安裝，所有安裝完成後需重啓。

5、安裝Android證書 安裝好Android Studio後，再次打開終端（命令行），輸入flutter doctor，這時x的數量會明顯減小，但可能仍是會遇到1-2個，若是隻有1個就說明沒有安裝證書，開發者只需在終端裏執行如下命令便可： flutter doctor --android-licenses 當提示Y/N選擇時，請直接選擇Y便可完成安裝。

02Flutter開發環境搭建（Mac版） 1、系統環境要求：要安裝並運行Flutter，開發環境必須知足如下條件。 操做系統： MacOS（64-bit）； 磁盤空間：大於700M，若是算上Android Studio等編輯工具，儘可能大於3G； 命令行工具：bash、mkdir、rm、git、curl、unzip、which、brew。

2、下載Flutter SDK包： 推薦在官網下載，網址：https://flutter.io/setup-macos/ 。 下載完成後，解壓安裝包到想安裝的目錄，如:cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

3、配置環境變量 壓縮包下載好之後，選擇位置進行解壓，壓縮包解壓的位置在下面配置環境變量的時候仍要使用。 首先打開終端工具，使用vim進行配置環境變量，命令以下： vim ~/.bash_profile 而後，在打開的文件裏增長一行代碼，配置flutter命令，使其在任何地方均可以使用。添加的代碼爲： export PATH=/app/flutter/bin:$PATH 這行命令須要根據壓縮包解壓的位置來進行編寫，內容是你的路徑。配置完成後，還需用source命令從新加載，具體命令以下: source ~/.bash_profile 完成之後， flutter的安裝工做已基本完成，但要進行開發，還須要使用命令來檢測其是否成功安裝。

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

5、安裝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 。

6、安裝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開發工具的配置與使用 1、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)，或者點擊 熱重載按鈕 (帶有閃電圖標的按鈕)。 2、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應用。 1、鏈接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>，其中 platform 是芯片系列，如 x86。

2、鏈接Android真機設備 要準備在Android設備上運行並測試Flutter應用，須要Android 4.1或更高版本的Android設備。 在Android設備上啓用開發人員選項和USB調試； 使用USB將手機插入電腦。若是設備出現調試受權提示，請受權你的電腦能夠訪問該設備； 在命令行運行 flutter devices 命令以驗證Flutter識別您鏈接的Android設備； 運行啓動你應用程序 flutter run。

3、鏈接iOS模擬器 要準備在iOS模擬器上運行並測試Flutter應用，請按如下步驟操做： 在你的MAC上，經過 Spotlight 或如下命令找到模擬器:open -a Simulator； 經過檢查模擬器 Hardware > Device 菜單中的設置，確保模擬器正在使用64位設備（iPhone 5s或更高版本)； 根據電腦屏幕大小，模擬高清屏iOS設備可能會溢出屏幕。能夠在模擬器的 Window> Scale 菜單下設置設備比例； 運行 flutter run，啓動flutter應用程序。

4、鏈接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