![加入更多語法 - Control Flow
var json = {'user': ['Ray', 13]};
var name = json['user']![0];
var age = json['user']![1];
var json = { 'user': ['Ray', 13]};
var {'user': [ name, age]} = json;
Before
After](https://image.slidesharecdn.com/flutterforwardextendedtaipei-240528064154-964d379e/85/Flutter-Forward-Extended-in-Google-Developer-Taipei-60-320.jpg)
![加入更多語法 - Control Flow
var json = { 'user': ['Ray', 13]};
var { 'user': [ name, age]} = json;](https://image.slidesharecdn.com/flutterforwardextendedtaipei-240528064154-964d379e/85/Flutter-Forward-Extended-in-Google-Developer-Taipei-61-320.jpg)
![加入更多語法 - Control Flow
switch(json) {
case {'user': [String name, int age]}:
print('User $name is $age years old');
break;
default:
throw 'unknown message';
}
if (json is Map<String, dynamic> &&
json.length == 1 &&
json.containsKey('key')) {
var user = json['user'];
if (user is List<dynamic> &&
user.length == 2 &&
user[0] is String &&
user[1] is int) {
var name = user[0] as String;
var age = user[1] as int;
print('User $name is $age years old');
}
}
var json = { 'user': ['Ray', 13]};
Before
After](https://image.slidesharecdn.com/flutterforwardextendedtaipei-240528064154-964d379e/85/Flutter-Forward-Extended-in-Google-Developer-Taipei-62-320.jpg)
Flutter Forward Extended in Google Developer Taipei
- 2. Flutter Forward 回顧 Organizer GDG 高雄 房志剛
- 3. 房志剛 任職圈圈科技 App 工程師 畢業於 中山大學資訊工程研究所 GDG 高雄 Organizer 高科校務通 v3 和 中山校務通作者 原生 Android 2年 Flutter 4年 GitHub Facebook
- 4. Flutter 3.7 Impeller 預覽版 生態系統 Dart 3.0 Alpha Flutter 下一步 + + + + + Flutter Forward
- 6. 加強 Material 3 支援 Impeller 預覽版 Method Channel 支援 isolates DevTools 更新 Widget 更新 + + + + + Flutter 3.7 iOS 平台功能更新 +
- 7. ● Badge ● BottomAppBar ● Filled and Filled Tonal buttons ● SegmentedButton ● Checkbox ● Divider ● Menus ● DropdownMenu ● Drawer and NavigationDrawer 加強 Material 3 支援 ● ProgressIndicator ● Radio buttons ● Slider ● SnackBar ● TabBar ● TextFields and InputDecorator ● Banner 新增與修改元件
- 8. 加強 Material 3 支援 ●預設仍使用 Material 2 ●新參數 colorSchemeSeed 配合顏色設計 ●但目前針對 Meterial 2 棄用沒有提及 ●Feature Tracker 互動網頁
- 9. ●在 macOS 可使用 PlatformMenuBar (3.3 支援) ●全平台可使用 MenuBar ○ 子元素可使用自訂元件 ○ 或使用官方提供的 MenuItemButton 及 SubmenuButton ●參考文件 Menu bars and cascading menus
- 10. ●iOS 已可在 stable channel 使用 ●Android 版本仍在開發 ●Web 及 Desktop 尚未有明確計畫 Impeller 預覽版
- 11. ●從去年 Flutter 3.3 開始實驗的新的渲染引擎 ●目標是取代現有的 Skia，再最佳化 iOS 的首次卡頓問題 ●更有效的能在離線階段編譯對應平台所需的著色器語言 ●目標主要有 ○ 可預測效能 ○ 可檢測 ○ 可移植 ○ 有效使用現代圖形 API (Metal 和 Vulkan) ○ 有效利用並行 (Concurrency) 什麼是 Impeller ?
- 12. ●現行使用的 SkSL（Skia shading language）為 GLSL 的變體，著色 器都需要在第一次運行時根據裝置編譯 ●自從 Apple 2019年公告全面棄用 OpenGL，加速 Flutter 在 1.17 版支 援 Metal API，第一次啟用的卡頓問題已非常嚴重 ●Flutter 1.20 版本中为 OpenGL 後端 實現 SkSL 預熱機制 ●Flutter 2.5 版本支援 Metal 後端的 SkSL 預熱機制 ●最終讓 Flutter 在 2022年思考要替換底層的渲染引擎 為何需要替換？
- 13. ●著色器採用 GLSL 4.60 (OpenGL Shading Language) ●透過第一階段的編譯 (Impeller Shader Compiler)轉換成 支援 SPIR-V 的格式 ●第二階段再透過 SPIR-V 轉換平台的 Shader Language(ex. iOS/macOS 的 Metal API) Impeller 怎麼運作
- 14. SPIR-V (Standard Portable Intermediate Representation)
- 15. 使用 Impeller 的 App - Wonderous iOS 下載
- 16. 啟用 Impeller Android 在 AndroidManifest.xml 中 <application> 的底下 iOS 在 Info.plist 中 <dict> 的底下 flutter run 加上 --enable-impeller <key>FLTEnableImpeller</key> <true/> <meta-data android:name="io.flutter.embedding.android.EnableImpeller" android:value="true" />
- 17. Hotfixes in Flutter 3.7 https://github.com/flutter/flutter/wiki/Hotfixes- to-the-Stable-Channel
- 18. ●App 設定驗證 ○ 版本號 ○ Display Name (App 名稱) ○ Bundle Identifier ○ iOS Deployment Target ●資源檔驗證 ○ App icon ○ Launch Image (第一次開啟的過場圖案) iOS 發布驗證
- 22. ●TextField 可透過參數 contextMenuBuilder 設定 ●不支援 Android App Actions ●可透過 ContextMenuController 另外支援其他 Widget ●完整範例 自訂內容選單
- 23. ●TextField 可透過參數 contextMenuBuilder 設定 ●不支援 Android App Actions ●可透過 ContextMenuController 另外支援其他 Widget ●完整範例 自訂內容選單
- 25. CupertinoListSection CupertinoListTile iOS like Widget 更新
- 26. ●修正許多相關的 issues ●像是 Scrollbars 及 DraggableScrollableSheet ●改善 macOS 平台的滾動體驗 ●新增 AnimatedGrid 和 SliverAnimatedGrid 滾動改善
- 28. flutter_adaptive_scaffold 套件 Flutter 官方維護響應式 Scaffold
- 29. ●套件 Swift 遷移 ●Bitcode 棄用 ●iOS PlatformView BackdropFilter iOS 平台功能更新
- 30. ●將官方第一優先(1P)套件實作從 Objective-C 遷移至 Swift ●以下套件 ○ quick_actions ○ ios_platform_images ○ url_launcher ○ google_sign_in ○ local_auth ○ video_player ○ in_app_purchase ○ image_picker ○ google_maps_flutter ○ camera ○ webview_flutter 套件 Swift 遷移
- 31. ●watchOS 及 tvOS App 在 Xcode 14 不再要求使用 bitcode ●預設將不會開啟 bitcode ●透過 Add-to-app 遷移 Bitcode 棄用
- 32. ●BackdropFilter 效果可影響 iOS 原生畫面 ●右側以原生文字元件及 Google Map 為例 iOS PlatformView BackdropFilter
- 33. ●完整名稱為 Custom Fragment Shaders ●讓指定 UI 使用自訂的著色器 ●可把自訂的 GLSL shaders 定義在 pubspec.yaml ●目前不支援網頁版 ●官方另外提供 flutter_shaders 提供相關的工具類 ●可參考 官方文件 ●Demo 自訂片段著色器改進
- 34. ●多國語言國際化工具與文件更新 ●Platform Method Channels 可使用在任何 isolate ●記憶體管理改進 ●棄用 macOS 10.11 到 10.13 支援，最低支援版本為 10.14 Mojave ●Hot reload 支援字型資源檔 ●減少 iOS 動畫卡頓 (會啟用 CADisplayLink 參數) ●Windows 支援深色 title bars Flutter 3.7 其他更新
- 35. 遷移 Windows 支援深色 title bars
- 36. Dart 2.19 - Isolate.spawn(以前)
- 37. Dart 2.19 - Isolate.run(現在)
- 38. FlutterFlow widgetbook PUPG Mobile Google classroom Software supply chain security + + + + + Flutter 生態系統
- 39. FlutterFlow
- 41. widgetbook
- 42. PUPG Mobile - 社區模塊(社群功能)
- 43. Google Classroom
- 44. Google 自家產品使用 Flutter 開發
- 45. 軟體供應鏈安全
- 47. 軟體供應鏈安全 - GitHub Security Advisories
- 48. 軟體供應鏈安全 - 套件 Hash 檢查
- 49. 軟體供應鏈安全 - 上傳 Pub GitHub Action 整合
- 51. 100% sound null safety 加入更多語法 直接調用平台函式庫 支援更多平台架構 + + + + Dart 3.0
- 52. ●Dart 3 強制使用 sound null safety ●針對已相容的套件 pub 修改套件標示 100% sound null safety
- 53. Null Safety int getAge(Animal a) { return a.age; } Dart 1 Dart 2: Sound types
- 54. Null Safety int getAge(Animal a) { return a.age; } Dart 2: Sound types Dart 2.12: Sound null safety
- 55. Null Safety - Dart 3.0 int getAge(Animal a) { return a.age; }
- 56. 加入更多語法 - Record (double x, double y) geoLocation(String name) { if (name == 'Nairobi') { return (-1.2921, 36.8219); } else { ... } } void main(List<String> arguments) { final (lat, long) = geoLocation('Nairobi'); print('Current location: $lat, $long'); }
- 57. 加入更多語法 - sealed class sealed class Shape { } class Square implements Shape { final double length; Square(this.length); } class Circle implements Shape { final double radius; Circle(this.radius); } double calculateArea(Shape shape) => switch (shape) { Square(length: var l) => l * l, Circle(radius: var r) => math.pi * r * r };
- 58. 加入更多語法 - Control Flow ListTile( title: const Text('Welcome'), enabled: hasNextStep, subtitle: hasNextStep ? const Text('Tap to advance') : null, onTap: hasNextStep ? (){ advace(); } : null, trailing: hasNextStep ? null : const Icon(Icons.stop), ),
- 59. 加入更多語法 - Control Flow ListTile( title: const Text('Welcome'), enabled: hasNextStep, if(hasNextStep)...( subtitle: const Text('Tap to advance'), onTap: (){ advace(); }, ) else ...( trailing: const Icon(Icons.stop), ), ),
- 60. 加入更多語法 - Control Flow var json = {'user': ['Ray', 13]}; var name = json['user']![0]; var age = json['user']![1]; var json = { 'user': ['Ray', 13]}; var {'user': [ name, age]} = json; Before After
- 61. 加入更多語法 - Control Flow var json = { 'user': ['Ray', 13]}; var { 'user': [ name, age]} = json;
- 62. 加入更多語法 - Control Flow switch(json) { case {'user': [String name, int age]}: print('User $name is $age years old'); break; default: throw 'unknown message'; } if (json is Map<String, dynamic> && json.length == 1 && json.containsKey('key')) { var user = json['user']; if (user is List<dynamic> && user.length == 2 && user[0] is String && user[1] is int) { var name = user[0] as String; var age = user[1] as int; print('User $name is $age years old'); } } var json = { 'user': ['Ray', 13]}; Before After
- 63. 加入更多語法 - Usable Switch switch(charCode) { case slash when nextCharCode == slash: skipComment(); case slash || star || plus || minus: opearator(); case >= digit0 && <= digit9: number(); }
- 64. 直接調用平台函式庫 - C FFI
- 65. ●FFI，Foreign function interface ●目前已支援 Swift/Objective-C 在 iOS/macOS ●Java/Kotlin 調用 Jetpack 函式庫 或 Android 函式庫 直接調用平台函式庫 - 雙平台
- 66. 支援更多指令集架構
- 68. RISC-V 架構支援 電腦運行 Dart Console App 在 ClockworkPi
- 69. Dart2Wasm on Flutter Web https://flutterweb-wasm.web.app/
- 70. Flutter Web Time to load
- 71. Impeller 雙平台穩定版 網頁版 Element embedding 支援更多指令集架構 Dart 3.0 + + + + Flutter 下一步
- 72. 3D with Flutter
- 73. Flutter Web Element embedding https://flutter-forward-demos.web.app/#/
- 74. ●Custom asset transformers ●Efficient 2D scrolling widgets (e.g. tables and trees) ●Platform Views on macOS and Windows ●Drag and drop ●Wireless debugging on iOS ●Custom "flutter create" templates Flutter Roadmap 2023 - Features
- 75. GitHub 最多 thumbs-up issues
- 76. ●Code Push ●穿戴式裝置與車用系統整合 ●SEO on web ●透過 Homebrew 安裝 Flutter Flutter Roadmap 2023 - Non-goals
- 77. Dash
- 78. Dash?
- 81. THANK YOU!