初窺 Flutter 開發.pdf

初虧 Flutter 開發
GDSC NYCU 分享
講者：房志剛

房志剛
在圈圈科技 App 工程師
畢業於中山大學資訊工程研究所
GDG Taipei Organizer
高科校務通 v3 和中山校務通作者
目前專注於 APP 開發 by Flutter

DevFest Taiwan 即時口罩地圖

應用程式開發(以 Linux 為例)

原生應用程式開發
v.s.
跨平台應用程式開發

原生架構(Android為例)
程式碼 (Java & Kotlin)
系統提供元件
(OEM Widget)
繪圖
硬體
(相機、感測器等)
應用程式
作業系統
事件
系統 API

作業系統採用原生開發程式語言
● Android: Java & Kotlin
● iOS: Objective-C & Swift
● macOS: Objective-C & Swift
● Windows: C++ & C#

不同版本的系統提供元件
Android 4.4 Android 5.0

Flutter 架構
繪圖
原生應用程式
事件
你的應用程式
Dart 程式碼
橋接程式碼
原生程式碼介面彩現程式碼
作業系統
硬體
系統 API

Flutter 架構
繪圖
原生應用程式
事件
你的應用程式
Dart 程式碼
橋接程式碼
原生程式碼介面彩現程式碼
作業系統
硬體
系統 API
備註: Flutter 3.7 以後
iOS 採用 Impeller

橋接程式碼
@Method(name:’getWifiName’)
getWifiName();
MethodChannel(name:’getWifiName’)
橋接程式碼(Dart)
橋接程式碼(Java)

用單一程式語言建構跨平台應用程式介面

Dart 是什麼？
● 由 Google 開源的靜態程式語言
● 以物件導向設計的語言
● 套件管理官方使用 Pub
● 語言開發歷程
○ 最初是作為瀏覽器 JavaScript 替代方案開發
○ 中期提供 Dart 轉譯 JavaScript 的方案
○ 現在專注提供 Flutter 應用層使用
● 語言吉祥物：Dash

Dart Code UI
你的應用程式

Flutter 建構 UI 概念上像是 (Mobile & Desktop)
Switch(value: true)
應用層介面描述
(Dart)

Flutter 建構 UI 概念上像是 (Mobile & Desktop)
繪製
Switch(value: true)
應用層介面描述
(Dart)
Flutter

Flutter 介面最小單位
Widget(元件)

Flutter 能使用元件
● 以 Material Design 為主的 Widget
● 另外提供 iOS 樣式的 Cupertino Widget
● 其他平台須透過套件使用
○ ﬂuent_ui (Windows)
○ macos_ui (macOS)
○ yaru_widgets (Ubuntu)

寫起來會長什麼樣子？

import
'package:flutter/material.dart'
;
void main() {
runApp(
MaterialApp(
home: MyWidget(),
)
);
}

class MyWidget extends
StatelessWidget {
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text('Welecome'),
),
body: Center(
child: Text(
'Hello world!',
),
),
);
}
}

MyWidget
Scaffold
Center AppBar
Text Text
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welecome'),
),
body: Center(
child: Text(
'Hello world!',
),
),
);
}
}

程式碼就是介面
(Code is UI)

Flutter 完整架構
你的應用程式

其他跨平台方案
● 以內嵌瀏覽器(WebView)為主
○ 開始於 2012
○ ex. Cordova, ionic...
● 以 JavaScript 映射為主
○ 開始於 2015
○ React Native, Native Script...

以內嵌瀏覽器為主的架構
程式碼 (Java & Kotlin)
WebView
(客製化)
繪圖
原生應用程式
事件
硬體
系統 API
作業系統

以 JavaScript 映射為主架構
原生應用程式
你的應用程式
JavaScript
橋接程式碼
原生程式碼映射程式碼
系統提供元件
(OEM Widget)
繪圖事件
硬體
系統 API
作業系統

映射程式碼
double a;
Double a;
經過工具生成對應的原生程式碼

為何我採用 Flutter 開發？

歷史
2014年 v1 2016年 v2 2019年 v3

除錯 - JIT (Just in Time)
發布 - AOT (Ahead on Time)

技術限制
● 介面繪製範圍只會在視窗中(不支援桌面小工具、本地
通知)
● 不支援熱更新 (Code Push)
● 官方原始不支援手錶、電視、車用系統
● 網頁版不支援搜尋引擎最佳化 (SEO)

以 Toast 為例 (Android原生)
你的應用程式
跳出App

以 Toast 為例 (Flutter)
你的應用程式
跳出App

Flutter 較為適合
● 功能著重於純介面開發
○ ex. 電商平台
● 較少存取硬體設備
● 需要有一致性介面呈現
● 較少需要與原生元件互動
○ ex. WebView

程式語言排行(From GitHub)

Firebase
● Google 雲端分析平台
● 改善使用者體驗
● 安全保障分析資訊
● 可提供
○ 行為分析
○ 程式崩潰分析
○ 遠端參數設定
○ 雲端推播
○ 雲端部署網頁
○ 機器學習模型分析

Google 使用 Flutter 開發的 App
● Google Earth
● Google Wallet
● Google Analytics
● Google Classroom
● Google Play Console
● Google Cloud
● Youtube Create

如果你真的使用 Flutter 開發

跨平台開發不能 100% 解決你的問題

手機平台
● 迎來下一代繪製引擎 Impeller
● Android
○ 需要了解 Gradle 與 Manifest 設計
○ 對於 targetSdkVersion 需要了解最新支援版本
● iOS
○ 需要了解 Cocoapods，目前不支援 Swift Package Managment
○ 最低的 iOS 支援版本通常會受限於套件
○ 目前 Flutter 3.7 以後都使用 Impeller，對於中文支援需加強

網頁平台
● 漸漸從 Dart2JS 轉向 Dart2Wasm
● 適合提供給 SPA (Single Page Application)
● 搜尋最佳化(SEO) 無法有效支援
● 效能上仍不及現代化網頁開發(Modern Web)

桌面平台
● 官方提供 Scaﬀold & Widget 沒有支援響應式
○ 透過 MediaQuery 類別判斷裝置尺寸
● PlatformView 尚未支援
● 些許鍵盤事件 ex.羅技滑鼠上一頁
● Firebase 桌面平台沒有完整支援
● 尚未完整支援 ARM64 Windows
● 發布工具仍有發展空間
● 多視窗支援尚未完整

Flutter 介紹
如何安裝？

Coding 現場 @Discord 每週二晚上九點
- Flutter 開發實踐
- 實作「山友」App
- 討論 Flutter 相關議題
- Discord 語音頻道
- YouTube 直播錄影

初窺 Flutter 開發.pdf

Recommended

Recommended

More Related Content

Similar to 初窺 Flutter 開發.pdf

Similar to 初窺 Flutter 開發.pdf (20)

Recently uploaded

Recently uploaded (10)

初窺 Flutter 開發.pdf