Save 37% off PRO during our Black Friday Sale! »

Flutter at Google I/O 2019

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

73e023e76c881293c494a350b1b7baa2?s=128

Katsumi Onishi

May 16, 2019
Tweet

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

  4. 4

  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
  16. 16

  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

  24. 24

  25. 25

  26. Passive to Interactive Experience 26

  27. Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS,

    and Web 27
  28. 28

  29. 29

  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

  41. 41

  42. Web 42

  43. Web 43

  44. Web 44 テクニカルプレビューの注意 • FlutterリポジトリのフォークしてWeb用のFlutterを開発している。 • FlutterウィジェットAPIはモバイルウィジェットAPIと同じであるが、一時的 に別々にパッケージされている。 • マージする作業はすでに始まっており、最終的には、すべてのプラット

    フォームで機能する単一のSDK /フレームワークが完成する。 •
  45. 45

  46. Building for iOS with Flutter 46

  47. 47

  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, ), ); } } }
  59. 59

  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

  62. 62

  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

  80. 80

  81. 81

  82. 82

  83. 83

  84. 84

  85. Evolving 85

  86. 86 Non-nullable types

  87. Non-nullable types 87

  88. Non-nullable types 88

  89. 89

  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 •
  95. 95