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

📣 GDSC NYCU 第二次社課來啦～

想了解 Flutter 嗎？

想認識開發語言 Dart 的特性嗎？

想挖掘開發生態系統相關基本知識嗎？

想一探究竟校務系統開發的秘辛嗎？

想嘗試 Flutter 的應用，並建立 App 嗎？

沒問題！只要來參加 GDSC NYCU 的第二次社課，我們將帶您了解 Flutter 及其相關應用，也會讓參與者實際體驗這項技術，建立基本的預設 App 🤩

📍 沒有基礎的人可以參加嗎？

💫 沒問題！只要是

· 對 Flutter 有興趣

· 想學習開發語言 Dart 的特性

· 希望透過 Flutter 建立基本預設App

都非常歡迎～就算是新手也沒關係🙌

（不論是社員/會員，沒有加入 GDSC NYCU 的人也可以參加！）

📍 社課詳細資訊

主題：初窺 Flutter 開發

講者：房志剛

時間：2023.10.19（四） 19:00～21:00（18:45開放入場）

地點：國立陽明交通大學 光復校區 工程三館地下室015

Transcript

1. 初虧 Flutter 開發 GDSC NYCU 分享 講者：房志剛
2. 房志剛 在 圈圈科技 App 工程師 畢業於 中山大學資訊工程研究所 GDG Taipei Organizer 高科校務通 v3 和 中山校務通作者 目前專注於 APP 開發 by Flutter
3. Since 2017
4. Android iOS 高科校務通
5. DevFest Taiwan 即時口罩地圖
6. 跨平台應用程式開發
7. 繪製介面一致
8. 名詞解釋
9. 應用程式開發
10. 應用程式開發(以 Linux 為例)
11. 原生應用程式開發 v.s. 跨平台應用程式開發
12. 原生架構(Android為例) 程式碼 (Java & Kotlin) 系統提供元件 (OEM Widget) 繪圖 硬體 (相機、感測器等) 應用程式 作業系統 事件 系統 API
13. Android XML Layout
14. iOS Storyboard Layout
15. Windows Forms App
16. 作業系統採用原生開發程式語言 • Android: Java & Kotlin • iOS: Objective-C & Swift • macOS: Objective-C & Swift • Windows: C++ & C#
17. 不同版本的系統提供元件 Android 4.4 Android 5.0
18. 跨平台
19. Flutter 架構 繪圖 原生應用程式 事件 你的應用程式 Dart 程式碼 橋接程式碼 原生程式碼 介面彩現程式碼 作業系統 硬體 (相機、感測器等) 系統 API
20. Flutter 架構 繪圖 原生應用程式 事件 你的應用程式 Dart 程式碼 橋接程式碼 原生程式碼 介面彩現程式碼 作業系統 硬體 (相機、感測器等) 系統 API 備註: Flutter 3.7 以後 iOS 採用 Impeller
21. Flutter 架構 繪圖 原生應用程式 事件 你的應用程式 Dart 程式碼 橋接程式碼 原生程式碼 介面彩現程式碼 作業系統 硬體 (相機、感測器等) 系統 API 備註: Flutter 3.7 以後 iOS 採用 Impeller
22. 橋接程式碼 @Method(name:’getWifiName’) getWifiName(); MethodChannel(name:’getWifiName’) 橋接程式碼(Dart) 橋接程式碼(Java)
23. 用單一程式語言建構跨平台應用程式介面
24. Since 2011
25. Dart 是什麼？ • 由 Google 開源的靜態程式語言 • 以物件導向設計的語言 • 套件管理官方使用 Pub • 語言開發歷程 ◦ 最初是作為瀏覽器 JavaScript 替代方案開發 ◦ 中期提供 Dart 轉譯 JavaScript 的方案 ◦ 現在專注提供 Flutter 應用層使用 • 語言吉祥物：Dash
26. Source 1,083 × 688
27. Dash
28. Dart Code UI 你的應用程式
29. Flutter 建構 UI 概念上像是 (Mobile & Desktop) Switch(value: true) 應用層介面描述 (Dart)
30. Flutter 建構 UI 概念上像是 (Mobile & Desktop) 繪製 Switch(value: true) 應用層介面描述 (Dart) Flutter
31. Flutter 介面最小單位 Widget(元件)
32. Flutter 能使用元件 • 以 Material Design 為主的 Widget • 另外提供 iOS 樣式的 Cupertino Widget • 其他平台須透過套件使用 ◦ fluent_ui (Windows) ◦ macos_ui (macOS) ◦ yaru_widgets (Ubuntu)
33. Material Design
34. Cupertino (iOS style)
35. Switch.adaptive
36. 寫起來會長什麼樣子？
37. import 'package:flutter/material.dart' ; void main() { runApp( MaterialApp( home: MyWidget(), ) ); }
38. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Welecome'), ), body: Center( child: Text( 'Hello world!', ), ), ); } }
39. 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!', ), ), ); } }
40. 程式碼就是介面 (Code is UI)
41. dartpad.dev
42. Flutter 完整架構 你的應用程式
43. 其他跨平台方案
44. 其他跨平台方案 • 以內嵌瀏覽器(WebView)為主 ◦ 開始於 2012 ◦ ex. Cordova, ionic... • 以 JavaScript 映射為主 ◦ 開始於 2015 ◦ React Native, Native Script...
45. 以內嵌瀏覽器為主的架構 程式碼 (Java & Kotlin) WebView (客製化) 繪圖 原生應用程式 事件 硬體 (相機、感測器等) 系統 API 作業系統
46. 以 JavaScript 映射為主架構 原生應用程式 你的應用程式 JavaScript 橋接程式碼 原生程式碼 映射程式碼 系統提供元件 (OEM Widget) 繪圖 事件 硬體 (相機、感測器等) 系統 API 作業系統
47. 映射程式碼 double a; Double a; 經過工具生成對應的原生程式碼
48. 為何我採用 Flutter 開發？
49. 強型別語言 靜態語言
50. 高科校務通
51. 歷史 2014年 v1 2016年 v2 2019年 v3
52. 除錯 - JIT (Just in Time) 發布 - AOT (Ahead on Time)
53. Hot Reload
54. Flutter 技術限制
55. 技術限制 • 介面繪製範圍只會在視窗中(不支援桌面小工具、本地 通知) • 不支援熱更新 (Code Push) • 官方原始不支援手錶、電視、車用系統 • 網頁版不支援搜尋引擎最佳化 (SEO)
56. 以 Toast 為例 (Android原生) 你的應用程式 跳出App
57. 以 Toast 為例 (Flutter) 你的應用程式 跳出App
58. Flutter 較為適合 • 功能著重於純介面開發 ◦ ex. 電商平台 • 較少存取硬體設備 • 需要有一致性介面呈現 • 較少需要與原生元件互動 ◦ ex. WebView
60. 生態系統 (Ecosystem)
62. Dart 官網
63. 程式語言排行(From GitHub)
64. Pub
65. 與其他 Google 工具
66. Firebase
67. Firebase • Google 雲端分析平台 • 改善使用者體驗 • 安全保障分析資訊 • 可提供 ◦ 行為分析 ◦ 程式崩潰分析 ◦ 遠端參數設定 ◦ 雲端推播 ◦ 雲端部署網頁 ◦ 機器學習模型分析
68. TensorFlow
69. Google 使用 Flutter 開發的 App • Google Earth • Google Wallet • Google Analytics • Google Classroom • Google Play Console • Google Cloud • Youtube Create
70. 如果你真的使用 Flutter 開發
71. 跨平台開發不能 100% 解決你的問題
72. 手機平台 • 迎來下一代繪製引擎 Impeller • Android ◦ 需要了解 Gradle 與 Manifest 設計 ◦ 對於 targetSdkVersion 需要了解最新支援版本 • iOS ◦ 需要了解 Cocoapods，目前不支援 Swift Package Managment ◦ 最低的 iOS 支援版本 通常會受限於套件 ◦ 目前 Flutter 3.7 以後都使用 Impeller，對於中文支援需加強
73. 網頁平台 • 漸漸從 Dart2JS 轉向 Dart2Wasm • 適合提供給 SPA (Single Page Application) • 搜尋最佳化(SEO) 無法有效支援 • 效能上仍不及現代化網頁開發(Modern Web)
74. 桌面平台 • 官方提供 Scaffold & Widget 沒有支援響應式 ◦ 透過 MediaQuery 類別判斷裝置尺寸 • PlatformView 尚未支援 • 些許鍵盤事件 ex.羅技滑鼠上一頁 • Firebase 桌面平台沒有完整支援 • 尚未完整支援 ARM64 Windows • 發布工具仍有發展空間 • 多視窗支援尚未完整
75. Flutter on 樹莓派
76. Gadget Corner
77. The journey to Flutter 3
79. IDX
80. Q & A
81. Flutter 介紹 如何安裝？
82. Windows macOS
83. 12/16 台大共同教學館
84. Coding 現場 @Discord 每週二晚上九點 - Flutter 開發實踐 - 實作「山友」App - 討論 Flutter 相關議題 - Discord 語音頻道 - YouTube 直播錄影