Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Widgets Update 6 Slider

Slide 7

Slide 7 text

Widgets Update 7 ButtomNavigationBar

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 Accessibility Semantics - Natural Language Labeling

Slide 10

Slide 10 text

Semantics - Traversal order 10 Accessibility

Slide 11

Slide 11 text

Cupertino 11 • iOS Design Widget

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 Cupertino

Slide 14

Slide 14 text

14 Adaptable UIs

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16

Slide 17

Slide 17 text

Interactive / Passive Experience 17

Slide 18

Slide 18 text

Interactive / Passive Experience 18

Slide 19

Slide 19 text

Interactive / Passive Experience 19

Slide 20

Slide 20 text

Relative Text Size 20

Slide 21

Slide 21 text

Relative Text Size 21

Slide 22

Slide 22 text

Interaction-Appropriate Navigation 22

Slide 23

Slide 23 text

Interaction-Appropriate Navigation 23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

Passive to Interactive Experience 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

29

Slide 30

Slide 30 text

Dart 2.3 30

Slide 31

Slide 31 text

Dart 2.3 31

Slide 32

Slide 32 text

Desktop (ChromeOS) 32

Slide 33

Slide 33 text

MediaQuery.of 33

Slide 34

Slide 34 text

KeyEvent 34

Slide 35

Slide 35 text

RawKeyboardListener 35

Slide 36

Slide 36 text

Cursor hover 36

Slide 37

Slide 37 text

Listener 37

Slide 38

Slide 38 text

iOS/Android 38

Slide 39

Slide 39 text

Chromebook 39

Slide 40

Slide 40 text

Desktop 40 early stages of development

Slide 41

Slide 41 text

41

Slide 42

Slide 42 text

Web 42

Slide 43

Slide 43 text

Web 43

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45

Slide 46

Slide 46 text

Building for iOS with Flutter 46

Slide 47

Slide 47 text

47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Cupertino Widgets 49

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Multiplatform design 51

Slide 52

Slide 52 text

Multiplatform design 52

Slide 53

Slide 53 text

Multiplatform design 53

Slide 54

Slide 54 text

Multiplatform design 54

Slide 55

Slide 55 text

Adaptive UI 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

59

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Pragmatic State Management in Flutter 61

Slide 62

Slide 62 text

62

Slide 63

Slide 63 text

63 State

Slide 64

Slide 64 text

Antipattern 64

Slide 65

Slide 65 text

Antipattern 65

Slide 66

Slide 66 text

Antipattern 66

Slide 67

Slide 67 text

Antipattern 67

Slide 68

Slide 68 text

State Management 68

Slide 69

Slide 69 text

State Management 69

Slide 70

Slide 70 text

State Management 70

Slide 71

Slide 71 text

State Management 71

Slide 72

Slide 72 text

Provider 72

Slide 73

Slide 73 text

Provider 73

Slide 74

Slide 74 text

Provider 74

Slide 75

Slide 75 text

Provider 75

Slide 76

Slide 76 text

Provider 76

Slide 77

Slide 77 text

Provider 77

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

80

Slide 81

Slide 81 text

81

Slide 82

Slide 82 text

82

Slide 83

Slide 83 text

83

Slide 84

Slide 84 text

84

Slide 85

Slide 85 text

Evolving 85

Slide 86

Slide 86 text

86 Non-nullable types

Slide 87

Slide 87 text

Non-nullable types 87

Slide 88

Slide 88 text

Non-nullable types 88

Slide 89

Slide 89 text

89

Slide 90

Slide 90 text

Links 90

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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 •

Slide 95

Slide 95 text

95