---
title: '認識 Flutter 跨平台技術、建立 Flutter 專案'
disqus: kyleAlien
---

認識 Flutter 跨平台技術、建立 Flutter 專案
===

## Overview of Content

:::success
* 如果喜歡讀更好看一點的網頁版本，可以到我新做的網站 [**DevTech Ascendancy Hub**](https://devtechascendancy.com/)

本篇文章對應的是 [**探索跨平台與 Flutter 技術的未來：從認識到 Flutter 專案建置 | 3 種跨平台**](https://devtechascendancy.com/explore-cross-platform-flutter-tech/)
:::

[TOC]

## 認識跨平台技術

跨平台開發，可以節省人力成本，不需要區分 `iOS`、`Android`、`Web`、`桌面應用`… 等等多個技術，以及多個開發團隊，對於許多公司來說都是相當重要的技術，而這個技術的選擇就是我們接下來要做的比較、認識（我們會以 Moblie 端開發來比較）

> 以 moblie 開發端（移動開發）來說，使用同一套代碼就可以開發出 `android` apk、`iOS` ipa 應用

### 手機移動端跨平台技術：H5、Reaction Native

1. 原生開發 - **Native 開發**：Native 開發就是指使用各自平台自身的技術來開發，有幾個平台就會有幾種開發專案（這種方式尚未跨及跨平台開發）

* **開發成本較高**：

原生開發要維護 Android、ios 兩個開發團隊、經過版本更新後，其成本會不斷上升 (開發、測試、維護...)

* **動態化需求**：

原生 Native 開應用大多數需要透過版本升級來更新內容，鮮少可以不更新應用就可以加載新功能、修復錯誤（除了熱修復技術）

:::info
* **Native 熱修復技術**

熱修復技術就是講求使用者不用更新新版應用也可以加載新功能、修復錯誤，但這並不是本章的重點… 先暫時知道概念即可
:::

2. H5 - **PhoneGap、Cordova、WebView 技術**：
* 最早在 2008 年有出現 [**PhoneGap**](https://phonegap.com/blog/tag/android/) 的框架 (支持 `Android` 平台)，之後貢獻給 Apache 的開源項目轉為 [**Cordova**](https://cordova.apache.org/docs/zh-cn/latest/guide/platforms/android/) (其核心同樣是 `PhoneGap`)

* 採用 `HTML`、`CSS`、`JS` 來完成跨平台技術，**其工作原理類似於 WebView，利用 `JavaInterface` 來完成與 Native 的互交**

* 好處就是，H5 支援熱重載技術，因為 Web 技術本就是在運行期間（`Runtime`）加載的技術

:::warning
雖然補齊了 Native 應用熱加載的不足，但相對來說 H5 開發的手機應用性能就比純 Native 應用還差，而且 H5 的 UI 設計就與原生應用有很大的不同
:::

* WebView 擔任 JavaScript 語言與 Native 語言之間的通信橋梁，但 **WebView 性能堪憂而且有「原生內存洩漏問題」**

> 用於 JS 與 Native 通訊的工具稱為 WebView JsBridge
>
> 

3. 跨平台框架 - **Reaction Native 技術**

* Reaction Native 技術（簡稱 `RN`）是由 facebook 在 2015 開發出來的開源框架；React Native 允許開發者使用 JavaScript 和 React 來構建 Android 和 iOS 平台的應用程式，並且能夠共享大部分的代碼，從而提高開發效率和縮短開發時間

* 而 RN 的繪製概念是通過「**橋梁**」完成「**原生繪製**」，**也就是說將==渲染的工作交給 Native==** 而不是 JS（這樣可以達到畫面渲染更優的效能）

> 並且 RN 一樣可以保持熱加載的特性

:::success
* 複習 Android Native 繪製方式（舊版命令式 UI，並非 Compose UI）

1. 原生庫的 xml 就是配置文件
2. 經過 inflater 分析
3. 反射創建 view
:::

* 使用 RN 的話，要使用 JS 寫好移動端的 UI，通過 Bridge 將 `Virtual Dom` (VD) 讀取並創建，當 UI 更新仍要透過 Bridge 傳遞並再次創建，導致 Bridge 維護成本較高

> 

### 解釋語言 vs. 編譯語言

* 對於上述的跨平台開發來講，都屬於使用解釋型語言（也就是 JS），而下表會簡單說明解釋語言、編譯語言兩種的特性

| 類型 | 語言 | 特色 |
| -------- | -------- | -------- |
| 解釋型 | JS | 效率較低、通用度高 |
| 編譯型 | C、C++ | 效率高、速度快 |
| 混和型 | Java | Java 源於解釋型語言，但又多了 `MetaData` 運行時解釋，造就了它是混合型語言的特性 |

* JS 就是解釋型語言，看到哪解釋到哪，**並非一次性解析**，而 C/C++ 則是編譯型語言，一次性編譯成為了專屬機台的機械碼

* Java 則是混和型語言，**早期透過 JVM 解釋字節碼(.class 文件)，到後期開發出 `JIN`、`AOT` 就轉型成為了編譯型語言**

## 認識 Flutter 技術

經由 2015 年的 Sky 前身，在 2018 年 Google 發表的 Flutter 移動 UI 框架技術 (免費、開源)，可以快速在 `iOS`、`android` 上架構高質量的 **原生用戶介面** 並且可以與原有的程式共同運行

:::success
* **`Flutter` & `React Native` 差異**

RN 其主要是透過 Bridge 的構通，分析過後產生相對的本地 View，這最終會導致 Bridge 的負載較大

Flutter 則是透過另外一個平台，**++經過編譯過後產生符合另一個平台的原生代碼++**，類似於所謂的 **交叉編譯**，來達到比起 RN 更高的效能（但又符合編寫一次代碼就可運行在多個平台）
:::

### Flutter 優勢、特點

* 其主要有幾個優勢，^1.^ **跨平台 UI 框架、編譯語言** ^2.^ **與原生 Native 互交**、^3.^ **開源**

1. ==**跨平台**==：移動端系統目前有 Android、IOS 兩個大平台，而 **Flutter 除了支援這兩個 UI 以外還支持了 Fuchsia 系統**

:::info
* [**Fuchsia**](https://zh.wikipedia.org/wiki/Google_Fuchsia) 是 Google 開發的新移動端系統，主要是以 C、C++ 開發，但是仍在開發階段並未完全成行，可繼續關注

* 其 UI 特點也有三個，Hot Reload、優質介面、本地性能，Debug 使用 JIN，Release 使用 AOT
* Hot Reload：不需要重新編譯安裝就可以直接使用、測試

* UI：對於 UI 設計的風格統一

* 性能：其性能接近於原生
:::

2. ==**Native 互交**==: 可在原有的應用中嵌入 Flutter 進行開發

3. ==**開源**==: 免費~ 不必擔心版權問題

:::warning
* React Native 被棄用的原因在之後 [**修改的協議**](https://www.zhihu.com/question/65437198/answer/231564052)，若是使用可能會影響到使用者的版權，而 Flutter 則沒有這方面的問題
:::

### Flutter 概念、架構

* 以下是 Flutter 的概念圖，經由「**交叉編譯**」根據不同平台編譯出對應的機械碼，因此省去了 Bridge 的開銷，而 **==這個編譯系統則是 Dart VM==，Flutter 可以透過 Dart VM 程式會編譯成對應的 ++ARM 機械碼++**

> 

* 架構圖如下 (來源網路)，Skia 渲染引擎、Dart VM

> 

### 跨平台技術分析、比較

| 跨平台技術 | 優點 | 缺點 |
| -------- | -------- | -------- |
| webView | android 原生支持 webView，JS & Java 互交 | android WebView 原生問題 (內存洩漏，最終導致 OOM)、Js 加載速度慢 |
| React Native(RN) | RN 渲染機制 (本地繪製) | Bridge 附載過重、維護成本高 |
| Flutter | 編譯成本地代碼，效率較高，HotReload、App 風格統一(fps120)、接近本地速度 | Native 還是較快一些、並且會增加 APK 的大小 |

### Flutter 安裝、建立 Flutter 專案

* 到 [**Flutter 網站**](https://flutterchina.club/get-started/install/)下載 Flutter SDK 包，下載後解壓縮，**並將該 bin 目錄加入到環境變數**

:::info
* 安裝之後可以到指令目錄下，**`flutter doctor`** 指令，它會檢查當前設備的環境是否還有缺使 flutter 插件

> 

:::

1. Android Studio 中點擊 File Settings，搜尋 Plugins 並點擊，**在內部搜尋欄位搜尋 Flutter 並安裝** (之後會要求重啟 AS IDE)

> 

2. 接著搜尋 Dart，自動補齊代碼

> 

3. 安裝完畢後就會有新的選項，`File` -> `New` -> `New Flutter Project`(新)

> 

4. 選擇 Flutter SDK 的路徑後就可以創建 Flutter 專案

> 

## Appendix & FAQ

:::info
:::

###### tags: `Flutter`