【程式工作坊】初窺 Flutter 開發

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Since 2017

Slide 4

Slide 4 text

Android iOS 高科校務通

Slide 5

Slide 5 text

DevFest Taiwan 即時口罩地圖

Slide 6

Slide 6 text

跨平台應用程式開發

Slide 7

Slide 7 text

繪製介面一致

Slide 8

Slide 8 text

名詞解釋

Slide 9

Slide 9 text

應用程式開發

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Android XML Layout

Slide 14

Slide 14 text

iOS Storyboard Layout

Slide 15

Slide 15 text

Windows Forms App

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

跨平台

Slide 19

Slide 19 text

Flutter 架構繪圖原生應用程式事件你的應用程式 Dart 程式碼橋接程式碼原生程式碼介面彩現程式碼作業系統硬體 (相機、感測器等) 系統 API

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Since 2011

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Source 1,083 × 688

Slide 27

Slide 27 text

Dash

Slide 28

Slide 28 text

Dart Code UI 你的應用程式

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Material Design

Slide 34

Slide 34 text

Cupertino (iOS style)

Slide 35

Slide 35 text

Switch.adaptive

Slide 36

Slide 36 text

寫起來會長什麼樣子？

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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!', ), ), ); } }

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

dartpad.dev

Slide 42

Slide 42 text

Flutter 完整架構你的應用程式

Slide 43

Slide 43 text

其他跨平台方案

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

為何我採用 Flutter 開發？

Slide 49

Slide 49 text

強型別語言靜態語言

Slide 50

Slide 50 text

高科校務通

Slide 51

Slide 51 text

歷史 2014年 v1 2016年 v2 2019年 v3

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Hot Reload

Slide 54

Slide 54 text

Flutter 技術限制

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

生態系統 (Ecosystem)

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Dart 官網

Slide 63

Slide 63 text

程式語言排行(From GitHub)

Slide 64

Slide 64 text

Pub

Slide 65

Slide 65 text

與其他 Google 工具

Slide 66

Slide 66 text

Firebase

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

TensorFlow

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

如果你真的使用 Flutter 開發

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Flutter on 樹莓派

Slide 76

Slide 76 text

Gadget Corner

Slide 77

Slide 77 text

The journey to Flutter 3

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

IDX

Slide 80

Slide 80 text

Q & A

Slide 81

Slide 81 text

Flutter 介紹如何安裝？

Slide 82

Slide 82 text

Windows macOS

Slide 83

Slide 83 text

12/16 台大共同教學館

Slide 84

Slide 84 text

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