Flutter–Flutter開發環境搭建
一、前言
Flutter 是 Google推出並開源的移動應用開發框架，主打跨平台、高保真、高性能。開發者可以通過 Dart語言開發 App，一套程式碼同時運行在 iOS 和 Android平台。 Flutter提供了豐富的組件、介面，開發者可以很快地為 Flutter添加 native擴展。同時 Flutter還使用 Native引擎渲染視圖，這無疑能為用戶提供良好的體驗。
Flutter與用於構建跨平台移動應用程式的其它大多數框架不同，因為Flutter既不使用WebView，也不使用作業系統的原生控制項。 相反，Flutter使用自己的高性能渲染引擎來繪製widget。這樣不僅可以保證在Android和iOS上UI的一致性，而且也可以避免對原生控制項依賴而帶來的限制及高昂的維護成本。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫，包含字型、坐標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平台的，並提供了非常友好的API，目前Google Chrome瀏覽器和Android均採用Skia作為其繪圖引擎。
目前Flutter默認支援iOS、Android、Fuchsia（Google新的自研作業系統）三個移動平台。但Flutter亦可支援Web開發（Flutter for web）和PC開發，本書的示例和介紹主要是基於iOS和Android平台的，其它平台讀者可以自行了解。
1.1 Flutter框架結構
Flutter框架是一個純 Dart實現的 SDK，它實現了一套基礎庫，自底向上，我們來簡單介紹一下：
-
底下兩層（Foundation和Animation、Painting、Gestures）在Google的一些影片中被合併為一個dart UI層，對應的是Flutter中的
dart:ui包，它是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪製能力。 -
Rendering層，這一層是一個抽象的布局層，它依賴於dart UI層，Rendering層會構建一個UI樹，當UI樹有變化時，會計算出有變化的部分，然後更新UI樹，最終將UI樹繪製到螢幕上，這個過程類似於React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分，它除了確定每個UI元素的位置、大小之外還要進行坐標變換、繪製(調用底層dart:ui)。
-
Widgets層是Flutter提供的的一套基礎組件庫，在基礎組件庫之上，Flutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。而我們Flutter開發的大多數場景，只是和這兩層打交道。
1.2 Flutter引擎
Flutter引擎是一個純 C++實現的 SDK，其中包括了 Skia引擎、Dart運行時、文字排版引擎等。在程式碼調用 dart:ui庫時，調用最終會走到Engine層，然後實現真正的繪製邏輯。
1.3 總結
Flutter框架本身有著良好的分層設計，本節旨在讓讀者對Flutter整體框架有個大概的印象，相信到現在為止，讀者已經對Flutter有一個初始印象，在我們正式動手之前，我們還需要了解一下Flutter的開發語言Dart。
二、Flutter環境搭建
上面已經對Flutter的基本特點做了大概的介紹，如果我們要學習Flutter，那麼第一步就是要搭建相關的開發環境。Flutter的開發環境搭建包括兩部分內容：Flutter SDK安裝和開發工具（xcode、Android Studio、VS Code）安裝，本文主要是針對Mac系統上搭建Flutter開發環境。
說明：本文主要是列舉出了flutter環境搭建的基本過程，其中很多細節不太好描述和展示，具體搭建過程大家可以參考騰訊課程上的一個影片，該影片有全流程的搭建過程，大家可以參考。Flutter小白入門到實戰全新教程(2020)
2.1 Flutter SDK的安裝搭建
Flutter SDK的安裝主要分為3步，SDK下載、解壓安裝、配置環境變數。
- 去flutter官網下載其最新可用的安裝包，//flutter.dev/docs/development/tools/sdk/releases。官網提供了穩定版和beta版，大家根據自己的需要自己選擇即可。
-
注意，Flutter的渠道版本會不停變動，請以Flutter官網為準。另外，在中國大陸地區，要想正常獲取安裝包列表或下載安裝包，可能需要翻牆，讀者也可以去Flutter github項目下去下載安裝包，//github.com/flutter/flutter/releases 。
-
對下載下來的壓縮包解壓，然後將解壓後的文件放到你想安裝的目錄即可。也可以通過命令來執行該步驟，如：
cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip -
添加
flutter相關工具到path中。進入用戶目錄，按住 command + shift + 。，會顯示隱藏文件，找到 .bash_profile文件，在裡面添加如下程式碼，保存。export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export FLUTTER_INSTALL_PATH= 'flutter的安裝路徑放在這裡' export PATH=$FLUTTER_INSTALL_PATH/flutter/bin:${PATH} export PATH=$FLUTTER_INSTALL_PATH/flutter/bin/cache/dart-sdk/bin:${PATH}
然後在 終端 中執行 source ~/.bash_profile 即可。
注意: 如果你使用終端是zsh，終端啟動時
~/.bash_profile將不會被載入，解決辦法就是修改～/.zshrc，在其中添加：source ～/.bash_profile
5. 運行 flutter doctor
運行以下命令查看是否需要安裝其它依賴項來完成安裝，這條命令我們後面會經常用到的：
flutter doctor
該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟體或進一步需要執行的任務（以粗體顯示）。一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環境變數等，請按照提示解決。
如果所有環境和工具安裝都沒有問題，則會出現下面這樣的結果。
當然，目前我們還只安裝了SDK環境，所以只有第一項是OK的，其他的項我們慢慢來就可以了。
2.2 xcode安裝
Xcode安裝主要是配置iOS的開發環境，包括xcode集成開發環境和CocoaPods環境（iOS集成Flutter需要該環境）安裝。
- xcode軟體的安裝非常簡單，直接通過鏈接下載或蘋果應用商店安裝最新版本即可，也可以通過//developer.apple.com/download/more/選擇其他的xcode版本進行安裝。mac上安裝軟體都是傻瓜式的安裝方式，沒什麼需要著重強調的。需要注意的是，xocde本身比較大，目前最新版的10G+，所以，大家下載的時候注意耐心等待。
- CocoaPods環境安裝大家可以參考我之前的一篇文章，裡面有詳細講解如何安裝CocoaPods環境。iOS工具–CocoaPods 安裝使用總結
大家安裝完Xcode和CocoaPods環境之後，可以在終端再次運行 flutter doctor 命令,查看當前的進度。
2.3 Android Studio安裝和配置
Flutter依賴於Android Studio的全量安裝。Android Studio不僅可以管理Android 平台依賴、SDK版本等，而且它也是Flutter開發推薦的IDE之一（當然，你也可以使用其它編輯器或IDE，我們將會在後面討論）。
- 下載並安裝 Android Studio，下載地址：//developer.android.com/studio/index.html 。
- 啟動Android Studio，然後執行「Android Studio安裝嚮導」。這將安裝最新的Android SDK、Android SDK平台工具和Android SDK構建工具，這些是用Flutter進行Android開發所需要的。
Flutter官方提供了Android Studio和VS Code這兩款編輯器的開發插件，通過IDE和插件可獲得程式碼補全、語法高亮、widget編輯輔助、運行和調試支援等功能，可以幫助我們極大的提高開發效率。下面我們介紹一下Android Studio配置及使用。
使用Android Studio進行flutter開發需要安裝兩個插件:
Flutter插件： 支援Flutter開發工作流 (運行、調試、熱重載等)。Dart插件： 提供程式碼分析 (輸入程式碼時進行驗證、程式碼補全等)。
安裝步驟：
- 啟動Android Studio。
- 打開插件首選項 (macOS：Android Studio –》Preferences –》Plugins, Windows：File>Settings>Plugins)。
- 選擇 Browse repositories…，選擇 flutter 、dart插件並點擊
install。 - 重啟Android Studio後插件生效。
當然，這裡還有一些其他的快捷插件大家可以自行查找安裝使用。
這一步安裝之後，大家同樣可以在終端再次運行 flutter doctor 命令,查看當前的進度。Android Studio在flutter環境中還需要進行授權才能進行flutter開發，這個授權的 命令 在flutter doctor的結果項中會顯示，大家按指引操作即可。
2.4 VS Code安裝和配置
其實到此為止，flutter的開發環境已經沒問題了，理論上可以使用任何文本編輯器與命令行工具來構建Flutter應用程式。 不過，Flutter官方建議使用Android Studio和VS Code之一以獲得更好的開發體驗。Flutter官方提供了這兩款編輯器插件，通過IDE和插件可獲得程式碼補全、語法高亮、widget編輯輔助、運行和調試支援等功能，可以幫助我們極大的提高開發效率。
所以我們同樣也把VS Code的插件也簡單講解一下。
2.4.1 VS Code安裝
VS Code的安裝就不說了，去官網下載，然後跟著安裝指引就OK了。//code.visualstudio.com
VS Code是一個輕量級編輯器，支援Flutter運行和調試。
2.4.2 安裝flutter插件
- 啟動 VS Code。
- 調用 View>Command Palette…。
- 輸入 『install』, 然後選擇 Extensions: Install Extension action。
- 在搜索框輸入
flutter，在搜索結果列表中選擇 『Flutter』, 然後點擊 Install。 - 選擇 『OK』 重新啟動 VS Code。
環境搭建完成後，可以自己創建一個項目運行起來了。
