Flutter at Google I/O 2019

- Beyond Mobile: Material Design, Adaptable UIs, and Flutter
- Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web
- Building for iOS with Flutter
- Pragmatic State Management in Flutter
- Dart: Productive, Fast, Multi-Platform - Pick 3

Transcript

1. Flutter at Google I/O 2019 Katsumi Onishi Android Engineer 株式会社ディー・エヌ・エー @katsummy
2. 目次 2 Beyond Mobile iOS / Adaptive UIs State Management 1 3 Dart 4 2
3. Beyond Mobile: Material Design, Adaptable UIs, and Flutter 3
5. 5 Themes • Themes • AppBarTheme, ButtomTheme, CardTheme, DialogTheme, etc. • Dark Theme
6. Widgets Update 6 Slider
7. Widgets Update 7 ButtomNavigationBar
8. Widgets Update 8 • Floating Action Button Trasitions • Reorderable List View • Range Slider - Later this month (May) • Search Bar Extension -> Search Delegate
9. 9 Accessibility Semantics - Natural Language Labeling
10. Semantics - Traversal order 10 Accessibility
11. Cupertino 11 • iOS Design Widget
12. Cupertino 12 • Switch.adaptive https://api.flutter.dev/flutter/material/Switch/Switch.adaptive.html
13. 13 Cupertino
14. 14 Adaptable UIs
15. 15 Adaptive Design 引用) Responsive vs Adaptive Design – Kloudteam https://blog.kloud.team/responsive-vs-adaptive-design-646bb1c106a3
17. Interactive / Passive Experience 17
18. Interactive / Passive Experience 18
19. Interactive / Passive Experience 19
20. Relative Text Size 20
21. Relative Text Size 21
22. Interaction-Appropriate Navigation 22
23. Interaction-Appropriate Navigation 23
26. Passive to Interactive Experience 26
27. Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web 27
30. Dart 2.3 30
31. Dart 2.3 31
32. Desktop (ChromeOS) 32
33. MediaQuery.of 33
34. KeyEvent 34
35. RawKeyboardListener 35
36. Cursor hover 36
37. Listener 37
38. iOS/Android 38
39. Chromebook 39
40. Desktop 40 early stages of development
42. Web 42
43. Web 43
44. Web 44 テクニカルプレビューの注意 • FlutterリポジトリのフォークしてWeb用のFlutterを開発している。 • FlutterウィジェットAPIはモバイルウィジェットAPIと同じであるが、一時的 に別々にパッケージされている。 • マージする作業はすでに始まっており、最終的には、すべてのプラット フォームで機能する単一のSDK /フレームワークが完成する。 •
46. Building for iOS with Flutter 46
48. 48 not using Material on iOS • iOS ユーザー そのプラットフォームの体験に慣れている。 • 異なる体験を提供すると混乱する • Flutter のSDKには、それをサポートする仕組みがある • Cupertino Widgets
49. Cupertino Widgets 49
50. 50 Navigation 階層型ナビゲーション (Android/Web) フラットナビゲーション (iOS)
51. Multiplatform design 51
52. Multiplatform design 52
53. Multiplatform design 53
54. Multiplatform design 54
55. Adaptive UI 55
56. Adaptive UI 56 class LogScreen extends StatelessWidget { @override Widget build(BuildContext context) { return AdaptivePageScaffold( title: 'Your Log', child: ListView.builder( itemCount: dayModels.length, itemBuilder: (context, index) => DailyDisplay(dayModels[index]), ), ); } }
57. Adaptive UI 57 class AdaptivePageScaffold extends StatelessWidget { @override Widget build(BuildContext context) { if (_isIOS) { return AdaptiveTextTheme( child: CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text(title), ), resizeToAvoidBottomInset: false, child: child, ), );
58. Adaptive UI 58 } else { return AdaptiveTextTheme( child: Scaffold( appBar: AppBar( title: Text(title), ), drawer: ModalRoute.of(context).isFirst ? MainDrawer() : null, body: child, ), ); } } }
60. 60 • RedBrogdon/building_for_ios_IO19: Code used during the I/O '19 talk, "Building for iOS with Flutter" https://github.com/RedBrogdon/building_for_ios_IO19 • Platform specific behaviors and adaptations - Flutter https://flutter.dev/docs/resources/platform-adaptations
61. Pragmatic State Management in Flutter 61
63. 63 State
64. Antipattern 64
65. Antipattern 65
66. Antipattern 66
67. Antipattern 67
68. State Management 68
69. State Management 69
70. State Management 70
71. State Management 71
72. Provider 72
73. Provider 73
74. Provider 74
75. Provider 75
76. Provider 76
77. Provider 77
78. State management - Flutter https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro 78
79. 79 Dart: Productive, Fast, Multi-Platform - Pick 3
85. Evolving 85
86. 86 Non-nullable types
87. Non-nullable types 87
88. Non-nullable types 88
90. Links 90
91. Google I/O 2019 - Sessions • Beyond Mobile: Material Design, Adaptable UIs, and Flutter https://events.google.com/io/schedule/events/1d9c02ed-bdc5-4a32-90bc-7316d6d1fb55 • Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web https://events.google.com/io/schedule/events/03d8425c-54ca-437b-bac7-ece76cca8347 • Building for iOS with Flutter https://events.google.com/io/schedule/events/37261739-76c8-45fe-a8a8-5cd9b1a894c2 • Pragmatic State Management in Flutter https://events.google.com/io/schedule/events/0cedc311-b646-4b29-b952-d7c7a832bfbd • Dart: Productive, Fast, Multi-Platform - Pick 3 https://events.google.com/io/schedule/events/664c8a66-50d8-41d5-933c-0983f878b377 91
92. Google I/O 2019 - YouTube • Flutter at Google I/O 2019 https://www.youtube.com/playlist?list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV 92
93. Source code • RedBrogdon/building_for_ios_IO19: Code used during the I/O '19 talk, "Building for iOS with Flutter" https://github.com/RedBrogdon/building_for_ios_IO19 • 2d-inc/developer_quest: Respository for the I/O 2019 demo: Become a tech lead, slay bugs, and don't get fired. https://github.com/2d-inc/developer_quest • 93
94. 94 Recap • Google I/O 2019 — Flutter Recap! – ProAndroidDev https://proandroiddev.com/google-i-o-2019-flutter-recap-c4e33ef5c47b • What’s new in Flutter at IO ‘19? – Flutter Community – Medium https://medium.com/flutter-community/whats-new-in-flutter-at-io-19-bb7b03d98c0f • Google Developers Japan: Flutter: モバイル、ウェブ、組み込み、そしてデスクトップのポータ ブル UI フレームワーク https://developers-jp.googleblog.com/2019/05/flutter-ui.html •