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
   

   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. 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. 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. View Slide

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. View Slide

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. 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. View Slide

46. Building for iOS with Flutter
    46
    

    View Slide

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. 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. 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. View Slide

81. View Slide

82. View Slide

83. View Slide

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. 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. View Slide