Flutter Recap from I/O 2019 + α

ABC 2019 Springの講演資料です。
「Flutter Recap from I/O 2019 + α」

#flutter #flutterjp #android #androidjp #abc2019s

Transcript

1. 2019.05.26 ਆݪɹ݈Ұ(Kenichi Kambara) ABC 2019 Spring Flutter Recap
 from I/O 2019 + α
2. • Mobile App Development • Technical Speeches • Droidcon UK/FR/NL/ES/SH • Devoxx Ukraine • DevFest Pisa • Developers Summit • Android Bazaar and Conference • StackOverflow DevDays • Cloud Days • Google I/O Extended Tokyo 2018 •Technical Writings •[Official] NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid) About me
3. Flutter (Review / So far) Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. •Fast development (Hot Reload) •Expressive, beautiful UIs (Material) •Single code base (Dart)
4. 
    Note: This slide uses photos of GoogleI/O 2019. Google I/O 2019 (May 7-9)
7. 
    Sandbox@Flutter Note: Sandbox Photos by @zaki50, @doramusukotake, @katsummy / Thanks!
8. 
   
9. 
   
10. 
    
11. 
    
12. •Pragmatic State Management in Flutter https://www.youtube.com/watch?v=d_m5csmrf7I Sessions about Flutter •Building for iOS with Flutter https://www.youtube.com/watch?v=ZBJa-xjZl3w • Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web https://www.youtube.com/watch?v=IyFZznAk69U •Dart: Productive, Fast, Multi-Platform - Pick 3 https://www.youtube.com/watch?v=J5DQRPRBiFI ▪Day1 •Beyond Mobile: Material Design, Adaptable UIs, and Flutter https://www.youtube.com/watch?v=YSULAJf6R6M ▪Day2 ▪Day3
13. •Beyond Mobile: Material Design, Adaptable UIs, and Flutter
 ->Material updates, Supporting Multi Screens •Building for iOS with Flutter
 ->App Development considering iOS (Cupertino) • Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web
 ->App Development for Mobile/Desktop/Web/Others •Dart: Productive, Fast, Multi-Platform - Pick 3 •Pragmatic State Management in Flutter Especially recommended Sessions
14. 
     'MVUUFS •Material Design •Beyond Mobile •Flutter 1.5 Flutter@I/O 2019
15. 
     'MVUUFS I/O 2019 •Material Design •Beyond Mobile •Flutter 1.5
16. Flutter Beyond Mobile: Material Design, Adaptable UIs, 
 and Flutter
17. 
     Problems of Material Design (I/O 2018)
18. 
     Material Theming (I/O 2018) With material theming, you can create a custom theme of material which is personalized for your product, expressing its brand through color, type, and shape.
19. Material Theming (I/O 2018) Cuts on the corner Bottom app bar + FAB
    
20. Material Theming (I/O 2019)
21. Themes
    
22. CardTheme
    
23. DialogTheme
    
24. 
    
25. 
     Example: Dark Theme
    
26. Supporting Dark Theme
    
27. 
    
28. Demo: Slider
    
29. Example: Slider
    
30. Demo: Bottom Navigation Bars
    
31. 
     Demo: FAB Transitions
    
32. 
    
33. Demo
    
34. 
    
     Demo
35. 
     Example: Search
    
36. Example: Search (on searching)
    
37. Example: Search (after searching)
    
38. 
    
39. Example: for Screen Reading
    
40. 
     Example: for Screen Reading
41. Example: for Screen Reading
    
42. Example: for Screen Reading
    
43. For Multi Platform
    
44. Example
    
45. Example
    
46. Interactive / Passive
    
47. Bad Case
    
48. Good Case
    
49. Code Example
    
50. 
     Demo: Foldable Device
51. 
     Code Example
    
52. 
     Demo: Wearable Device
53. A Bigger Experiment!!! by Flutter Team
55. Flutter Building for iOS with Flutter
56. 
     Non Specific Code
    
57. 
     With Specific Code
    
58. 
     Supporting Cupertino Specific Style
    
59. 
    
     Supporting Cupertino Specific Style
60. 
     Code Example
    
61. 
     'MVUUFS I/O 2019 •Material Design •Beyond Mobile •Flutter 1.5
62. Flutter Beyond Mobile: Building Flutter Apps
 for iOS, Android, Chrome OS, and Web
63. Beyond Mobile [Google Develops Blog]https://developers.googleblog.com/2019/05/Flutter-io19.html
64. 
    
65. Flutter (So far)
    
66. Flutter (So far)
    
67. 
     Multi Screen Support
68. 
     Multi Screen Support
     W
69. Flutter for Desktop
70. Key Event
    
71. Key Event
     W
72. MouseHover Event
    
73. 
     MouseHover Event
     W
74. Flutter for Desktop
    
75. Flutter for Web
76. Flutter for Web
    
77. Flutter for Web
    
78. Example: Flutter for Web
    
79. [GitHub]https://github.com/flutter/flutter_web Technical preview Flutter for Web
    
80. [Flutter Medium] https://medium.com/flutter-io/bringing-flutter-to-the-web-904de05f0df0 Flutter for Web
    
81. 1. Upgrading Flutter
 $ flutter upgrade 2. Cloning “Flutter for Web”
 $ git clone https://github.com/flutter/flutter_web.git 3. Moving to “Hello World (Flutter for Web)”
 $ cd examples/hello_world/ 4. Adding some tools (webdev/dart) to PATH
 $ export PATH=“$PATH”:<MY_FLUTTER_PATH>/.pub_cache/bin
 $ export PATH=“$PATH":<MY_FLUTTER_PATH>/bin/cache/dart-sdk/bin 5. Updating our project
 $ pub get 6. RUN!!!
 $ webdev serve Steps for “Hello Flutter for Web”
    
82. “Hello Flutter for Web”
    
83. Let’s try (Demo)
    
84. Let’s try (Demo)
    
85. 
     'MVUUFS I/O 2019 •Material Design •Beyond Mobile •Flutter 1.5
87. •Bug fixed (in Flutter 1.2) •Material & Cupertino Widget Sets •Flutter for Web •Dart 2.3 •In-App Purchases Supports Flutter 1.5 Overview
    
88. •Bug fixed (in Flutter 1.2) •Material & Cupertino Widget Sets •Flutter for Web •Dart 2.3 •In-App Purchases Supports Flutter 1.5 Overview
    
89. • Spread Operator • Null-Aware Spread Operator • Collection if • Collection for , etc. Dart 2.3
    
90. Widget build(BuildContext context) { return Column(children: [ Text(‘Header’), ...buildMainScreen(), Text(‘Footer’), ]); } Spread Operator
    
91. var list; var list2 = [0, ...?list]; assert(list2.length == 1); Null-Aware Spread Operator
    
92. Widget build(BuildContext context) { return Column(children: [ Text(‘Header’), if (isAndroid) IconButton(icon: Icon(Icons.search)), ]); } Collection if
    
93. Widget build(BuildContext context) { return Column(children: [ Text(‘Header’), for (var item in items) Text(item), ]); } Collection for
    
94. [in_app_purchase]https://pub.dev/packages/in_app_purchase In-App Purchases Supports
    
95. • Loading products for sale • Loading previous purchases • Making a purchase - Consumable - Permanent - Subscription In-App Purchases Supports
    
96. Flutter Next Step: Codelabs https://codelabs.developers.google.com/?cat=Flutter
    
97. First App Firebase Photo Sharing App
     Flutter Next Step: Codelabs
98. Codelabs (My recommendation) 
 Flutter Inexperienced persons
 ɾWrite Your First Flutter App part 1/2
 Flutter Beginners ɾBuilding Beautiful UIs with Flutter
 ɾMDC Series 101/102/103/104 Flutter Intermediates ɾBuild a Photo Sharing app with Google Photos and Flutter
 ɾIntro to Dart for Java Developers
    
99. Summary •Flutter ❤ Material •Beyond Mobile (Desktop/Web/Others) •Flutter 1.5
    
100. References •Flutter
 https://flutter.dev
 •Google Codelabs (Flutter)
 https://codelabs.developers.google.com/?cat=Flutter
 •Flutter Sessions on I/O 2019
 https://bit.ly/2YA4Oid
     
101. - Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Thank you so much. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid