Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Katsumi Onishi

May 16, 2019
Tweet

More Decks by Katsumi Onishi

Other Decks in Programming

Transcript

  1. Flutter at Google I/O 2019
    Katsumi Onishi
    Android Engineer
    株式会社ディー・エヌ・エー
    @katsummy

    View Slide

  2. 目次
    2
    Beyond Mobile
    iOS / Adaptive UIs
    State Management
    1
    3
    Dart
    4
    2

    View Slide

  3. Beyond Mobile: Material Design,
    Adaptable UIs, and Flutter
    3

    View Slide

  4. 4

    View Slide

  5. 5
    Themes
    • Themes
    • AppBarTheme, ButtomTheme, CardTheme,
    DialogTheme, etc.
    • Dark Theme

    View Slide

  6. Widgets Update
    6
    Slider

    View Slide

  7. Widgets Update
    7
    ButtomNavigationBar

    View Slide

  8. Widgets Update
    8
    • Floating Action Button Trasitions
    • Reorderable List View
    • Range Slider - Later this month (May)
    • Search Bar Extension -> Search Delegate

    View Slide

  9. 9
    Accessibility
    Semantics
    - Natural Language Labeling

    View Slide

  10. Semantics
    - Traversal order
    10
    Accessibility

    View Slide

  11. Cupertino
    11
    • iOS Design Widget

    View Slide

  12. Cupertino
    12
    • Switch.adaptive https://api.flutter.dev/flutter/material/Switch/Switch.adaptive.html

    View Slide

  13. 13
    Cupertino

    View Slide

  14. 14
    Adaptable UIs

    View Slide

  15. 15
    Adaptive Design
    引用) Responsive vs Adaptive Design – Kloudteam https://blog.kloud.team/responsive-vs-adaptive-design-646bb1c106a3

    View Slide

  16. 16

    View Slide

  17. Interactive / Passive Experience
    17

    View Slide

  18. Interactive / Passive Experience
    18

    View Slide

  19. Interactive / Passive Experience
    19

    View Slide

  20. Relative Text Size
    20

    View Slide

  21. Relative Text Size
    21

    View Slide

  22. Interaction-Appropriate Navigation
    22

    View Slide

  23. Interaction-Appropriate Navigation
    23

    View Slide

  24. 24

    View Slide

  25. 25

    View Slide

  26. Passive to Interactive Experience
    26

    View Slide

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

    View Slide

  28. 28

    View Slide

  29. 29

    View Slide

  30. Dart 2.3
    30

    View Slide

  31. Dart 2.3
    31

    View Slide

  32. Desktop (ChromeOS)
    32

    View Slide

  33. MediaQuery.of
    33

    View Slide

  34. KeyEvent
    34

    View Slide

  35. RawKeyboardListener
    35

    View Slide

  36. Cursor hover
    36

    View Slide

  37. Listener
    37

    View Slide

  38. iOS/Android
    38

    View Slide

  39. Chromebook
    39

    View Slide

  40. Desktop
    40
    early stages of development

    View Slide

  41. 41

    View Slide

  42. Web
    42

    View Slide

  43. Web
    43

    View Slide

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

    View Slide

  45. 45

    View Slide

  46. Building for iOS with Flutter
    46

    View Slide

  47. 47

    View Slide

  48. 48
    not using Material on iOS
    • iOS ユーザー そのプラットフォームの体験に慣れている。
    • 異なる体験を提供すると混乱する
    • Flutter のSDKには、それをサポートする仕組みがある
    • Cupertino Widgets

    View Slide

  49. Cupertino Widgets
    49

    View Slide

  50. 50
    Navigation
    階層型ナビゲーション
    (Android/Web)
    フラットナビゲーション
    (iOS)

    View Slide

  51. Multiplatform design
    51

    View Slide

  52. Multiplatform design
    52

    View Slide

  53. Multiplatform design
    53

    View Slide

  54. Multiplatform design
    54

    View Slide

  55. Adaptive UI
    55

    View Slide

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

    View Slide

  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,
    ),
    );

    View Slide

  58. Adaptive UI
    58
    } else {
    return AdaptiveTextTheme(
    child: Scaffold(
    appBar: AppBar(
    title: Text(title),
    ),
    drawer: ModalRoute.of(context).isFirst ? MainDrawer() : null,
    body: child,
    ),
    );
    }
    }
    }

    View Slide

  59. 59

    View Slide

  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

    View Slide

  61. Pragmatic State Management in Flutter
    61

    View Slide

  62. 62

    View Slide

  63. 63
    State

    View Slide

  64. Antipattern
    64

    View Slide

  65. Antipattern
    65

    View Slide

  66. Antipattern
    66

    View Slide

  67. Antipattern
    67

    View Slide

  68. State Management
    68

    View Slide

  69. State Management
    69

    View Slide

  70. State Management
    70

    View Slide

  71. State Management
    71

    View Slide

  72. Provider
    72

    View Slide

  73. Provider
    73

    View Slide

  74. Provider
    74

    View Slide

  75. Provider
    75

    View Slide

  76. Provider
    76

    View Slide

  77. Provider
    77

    View Slide

  78. State management - Flutter
    https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
    78

    View Slide

  79. 79
    Dart: Productive, Fast, Multi-Platform -
    Pick 3

    View Slide

  80. 80

    View Slide

  81. 81

    View Slide

  82. 82

    View Slide

  83. 83

    View Slide

  84. 84

    View Slide

  85. Evolving
    85

    View Slide

  86. 86
    Non-nullable types

    View Slide

  87. Non-nullable types
    87

    View Slide

  88. Non-nullable types
    88

    View Slide

  89. 89

    View Slide

  90. Links
    90

    View Slide

  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

    View Slide

  92. Google I/O 2019 - YouTube
    • Flutter at Google I/O 2019
    https://www.youtube.com/playlist?list=PLjxrf2q8roU2no7yROrcQSVtwbYyxAGZV
    92

    View Slide

  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

    View Slide

  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

    View Slide

  95. 95

    View Slide