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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Widgets Update
    6
    Slider

    View full-size slide

  6. Widgets Update
    7
    ButtomNavigationBar

    View full-size slide

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

    View full-size slide

  8. 9
    Accessibility
    Semantics
    - Natural Language Labeling

    View full-size slide

  9. Semantics
    - Traversal order
    10
    Accessibility

    View full-size slide

  10. Cupertino
    11
    • iOS Design Widget

    View full-size slide

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

    View full-size slide

  12. 14
    Adaptable UIs

    View full-size slide

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

    View full-size slide

  14. Interactive / Passive Experience
    17

    View full-size slide

  15. Interactive / Passive Experience
    18

    View full-size slide

  16. Interactive / Passive Experience
    19

    View full-size slide

  17. Relative Text Size
    20

    View full-size slide

  18. Relative Text Size
    21

    View full-size slide

  19. Interaction-Appropriate Navigation
    22

    View full-size slide

  20. Interaction-Appropriate Navigation
    23

    View full-size slide

  21. Passive to Interactive Experience
    26

    View full-size slide

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

    View full-size slide

  23. Desktop (ChromeOS)
    32

    View full-size slide

  24. MediaQuery.of
    33

    View full-size slide

  25. RawKeyboardListener
    35

    View full-size slide

  26. Cursor hover
    36

    View full-size slide

  27. iOS/Android
    38

    View full-size slide

  28. Chromebook
    39

    View full-size slide

  29. Desktop
    40
    early stages of development

    View full-size slide

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

    View full-size slide

  31. Building for iOS with Flutter
    46

    View full-size slide

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

    View full-size slide

  33. Cupertino Widgets
    49

    View full-size slide

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

    View full-size slide

  35. Multiplatform design
    51

    View full-size slide

  36. Multiplatform design
    52

    View full-size slide

  37. Multiplatform design
    53

    View full-size slide

  38. Multiplatform design
    54

    View full-size slide

  39. Adaptive UI
    55

    View full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

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

    View full-size slide

  43. 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 full-size slide

  44. Pragmatic State Management in Flutter
    61

    View full-size slide

  45. Antipattern
    64

    View full-size slide

  46. Antipattern
    65

    View full-size slide

  47. Antipattern
    66

    View full-size slide

  48. Antipattern
    67

    View full-size slide

  49. State Management
    68

    View full-size slide

  50. State Management
    69

    View full-size slide

  51. State Management
    70

    View full-size slide

  52. State Management
    71

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 86
    Non-nullable types

    View full-size slide

  56. Non-nullable types
    87

    View full-size slide

  57. Non-nullable types
    88

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. 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 full-size slide