30 Days of Flutter (Day2): Flutter 的迷人之處

緯緯道來
·
·
IPFS
·
了解Flutter 在App Development 中扮演的角色
Flutter Logo

架設好 Flutter 開發環境之後,今天就讓我們來了解 Flutter 的特色以及 Flutter 在 App Development 中扮演的角色。

本篇文章屬於 30 Days of Flutter 系列文章中的第 2 篇。

同時部署在多個平台時,仍具備高效能

Flutter 最大的特色在於其可以使用同一個 Codebase 進行開發,並將開發出來的 App 部署在 iOS、Android、Web 或是 Desktop,這也就是所謂的 Cross-Platform Development Framework(跨平台開發框架)。說到跨平台開發的框架,其實不只有 Flutter 而已,Xamarin 與 React Native 都屬於跨平台開發框架,然而 Flutter 的出色之處在於其效能簡易

Flutter on Platform

Flutter App 與 Platform 之間不需要透過 Bridge 來進行溝通與轉換,因此在 Platform 中的 Canvas 中進行 Widget 的 Render 時(將 App 介面顯示在螢幕上)或是使用 Platform 的 Service (藍芽、GPS …)時也會更有效率。

有些 Cross-Platfrom Development Framework 雖然也可以用一份 Codebase 在不同平台之間部署,但是 App 與 Platfrom 之間常常不是最直接的 Render 畫面或是使用服務。

舉例來說,有些 Cross-Platfrom Development Framework 會將 App 以 WebView 的方式呈現在 Platform,並透過 Bridge 來使用 Platform 的 Service,如下圖所示。

又或者是透過建造一個 Bridge 來與 Platform 做互動,如下圖所示。

在我們使用 App 的過程中,時常需要滑動與點擊螢幕,App 介面就會呈現出相對應的視覺回饋(動畫)。然而,如果 App 與 Platform 之間是透過 Bridge 或是 WebView 來 Render 出畫面時,就無法最即時的去呈現視覺回饋給使用者,則 App 的使用者體驗就會不好。

以 Widget 代表整個 UI 結構,使得開發更為簡易

Flutter Framework and Engine

Flutter 的 Framework 是以 Dart 程式語言撰寫的。當然,我們在開發 Flutter App 時也會使用 Dart 程式語言,這也是為什麼我們在 VS Code 中下載 Flutter 套件時,會自動幫我們下載 Dart。Flutter 的 Engine 是以 C++ 撰寫而成。

Flutter App is built from Widgets

在 Flutter 中,所有的 UI 元件都是代表一個 Widget。舉例來說,一個按鈕(Button)、一段文字(Text)或是一張圖片(Image);此外,Layout 在 Flutter 中也是 Widget。例如,Padding、Column 或是 Row。

Flutter 中也提供了許多 built-in 的兩大種類的 Widget:Material Style Widget 與 Cupertino Style Widget。這兩種風格(類別)的 Widget 中包含了非常多的 Widget 可以使用,所以開發者當然不用自己重刻 Widget 囉!

Flutter example code

上方呈現的是 Flutter App 的範例程式碼。觀察程式碼,我們似乎可以猜出一些端倪:Center Widget 中有一個小孩為 Column Widget。Column Widget 中有兩個小孩為 Text Widget 與 Icon Widget。

程式碼的 UI 畫面

在 Flutter 中,就是透過建構一顆 Widget Tree 來塑造整個介面的樣子!

Hot Reload 技術使得開發過程更為人性化

上一篇文章的最後,我們建立一個 Flutter 專案,並在專案中更改程式碼,並按下 Hot Reload 按鈕,來呈將程式碼 Apply 到模擬器上,看看 UI 的變化。

在撰寫 Flutter App 時,我們可以在修改程式碼過後,點選 Hot Reload 按鈕將新改的程式碼 Apply 到模擬器上看看效果。因為有了 Hot Reload 這樣方便的技術,使得我們不需要每次改完程式碼時(即使只是改便字串內容),都需要重新編譯整個專案,才能看到效果。

實際上,能夠使用 Hot Reload 的技術與 Flutter Framework 中所採用的程式語言—— Dart 有很大的關係。Dart 程式語言具有 Just in Time Compile (JIT)與 Ahead of Time Compile(AOT)兩種編譯方式。其中更詳細的細節我們也將在日後為大家解釋。

使用 Declarative UI Style 撰寫

在透過程式碼撰寫 UI 介面時,可以區分為兩種不同的撰寫風格:Declarative UI 與 Imperative UI。

舉例來說:如果們有想將左下的 UI 改成右下的 UI:

則在 Imperative UI Style 中的程式碼撰寫方式中,通常必須透過某種選擇器選擇 B,並將 B 的顏色改成 Orange,並將 B 的小孩由 C1 與 C2 設定成為 C1。

// imperative style
b.color = "orange"
b.clearChildren()
c = new C()
b.add(c)

但是在 Declarative UI Style 中,則是建立一個新的 B Widget,並透過 Rebuild 來建立自己以及底下的 Widget(建立一顆完整的 Widget Subtree)。

// declarative style
return B(
    color: "orange",
    children: [C()]
)

如果你在學習 Flutter 之前,沒有學過其他的 UI Framework,則可能比較難體會 Imperative 與 Declarative Style 的差異。


Framework,則可能比較難體會 Imperative 與 Declarative Style 的差異。

恭喜你 🎉 完成了 30 Days of Flutter 系列文章的第 2 篇!在本篇文章中,你了解到:

  • Flutter 部署在不同平台上仍保有高效能的原因
  • Flutter 的 UI 介面實際上代表的一顆 Widget Tree
  • Flutter 中使用 Declarative Style 來撰寫 UI
  • Declarative Style 與 Imperative Style 的差異

如果對於本篇文章中我們簡單了解 Flutter 中重要的觀念,仍無法完全理解的話是正常的。在下一篇文章中我們將實際動手寫 App,你將會更熟悉 Flutter 中觀念。

本篇文章參考自 Flutter Official Video 與 Website


CC BY-NC-ND 2.0 授權

喜歡我的作品嗎?別忘了給予支持與讚賞,讓我知道在創作的路上有你陪伴,一起延續這份熱忱!

緯緯道來研究所學生,主修資訊工程,熱衷於深度學習與機器學習。初期先以基本的程式教學為主,希望我的文章能夠幫助到你!(https://linktr.ee/johnnyhwu)
  • 來自作者
  • 相關推薦

Python 中 if __name__ == “__main__” 有什麼用處

近期的心情寫照

Python Module 觀念解析