This document summarizes Kenichi Kambara's presentation on Flutter and Wear OS at Google I/O 2018 Tokyo. The presentation introduced Flutter, Google's mobile app SDK for building native iOS and Android apps using Dart. It covered how to build beautiful UIs using Flutter and Material Design through live coding examples. It also summarized sessions from Google I/O about Flutter and introduced updates to Wear OS, including new features from Google Assistant, text-to-speech, and creating actions for Wear OS using Kotlin.

1. 2018.05.19
(Kenichi Kambara)
I/O Extended 2018 Tokyo@GDG
Flutter / Wear OS
[Google I/O 2018 Highlights]

2. About me
•
•
• Droidcon UK/FR/NL/ES/SH
• Developers Summit
• Android Bazaar and Conference
• StackOverflow DevDays
• Cloud Days
•
• Mobile Dev Blog
• Android
• NTT
(@korodroid)

3. Beta3 Cool
※ Google I/O 2018
Google I/O 2018

4. Flutter

5. Flutter
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
•Modern, reactive framework
•Dart
•Android Studio / VS Code

6. Google Developers (https://goo.gl/xfGjx1)

7. Medium (https://goo.gl/Eu89WS)

8. Sandbox

9. Sandbox

10. Sessions about Flutter
•Code beautiful UI with Flutter and Material Design
https://www.youtube.com/watch?v=hA0hrpR-o8U
•Total mobile development made fun with Flutter and Firebase
https://www.youtube.com/watch?v=p4yLzYwy_4g
[Day1]
•Build reactive mobile apps with Flutter
https://www.youtube.com/watch?v=RS36gBEp8OI
•Add Firebase to your cross-platformReact Native or Flutter app
https://www.youtube.com/watch?v=8wQ_MorYCEk
•Customize Material Components for your product
https://www.youtube.com/watch?v=3VUMl_l-_fI
•Build great Material Design products across platforms
https://www.youtube.com/watch?v=Ty6VjgVHiko
[Day2]
[Day3]

11. Sessions 1
•Code beautiful UI with Flutter and Material Design
➡Cool UI Flutter
•Total mobile development made fun with Flutter and Firebase
➡Flutter+Firebase
•Build reactive mobile apps with Flutter
➡
•Add Firebase to your cross-platformReact Native or Flutter app
➡Firebase React Native/Flutter
•Customize Material Components for your product
➡Material Components UI/UX
•Build great Material Design products across platforms
➡Material Design (Design/Develop/Tools)

12. Designer/Developer
•Code beautiful UI with Flutter and Material Design
➡Cool UI Flutter
•Total mobile development made fun with Flutter and Firebase
➡Flutter+Firebase
•Build reactive mobile apps with Flutter
➡
•Add Firebase to your cross-platformReact Native or Flutter app
➡Firebase React Native/Flutter
•Customize Material Components for your product
➡Material Components UI/UX
•Build great Material Design products across platforms
➡Material Design (Design/Develop/Tools)

13. Flutter
• Customize Material Components for your product
• Build great Material Design products across platforms

14. Flutter is a first-class platform in Material Design

15. Material Theming(https://material.io)

16. Material Theming
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.

17. Material Theming(https://material.io)

18. (1)Design

19. (1)Design

20. (2)Develop

21. (2)Develop

22. (3)Tools

23. (3)Tools

24. (3)Tools:Material Theme Editor
Sketch Plugin

25. (3)Tools:Material Theme Editor
https://material.io/tools/theme-editor/
1. Sketch Material Theme Editor
2. Sketch :Plugins→Material→Open Theme Editor

26. (3)Tools:Gallery(https://gallery.io)
Collaboration Tool

27. Inspector
Comment
(3)Tools:Gallery(https://gallery.io)

28. (3)Tools:Gallery(Mobile App)

29. Brand Examples
Cuts on the cornerBottom app bar + FAB

30. Developer
•Code beautiful UI with Flutter and Material Design
➡Cool UI Flutter
•Total mobile development made fun with Flutter and Firebase
➡Flutter+Firebase
•Build reactive mobile apps with Flutter
➡
•Add Firebase to your cross-platformReact Native or Flutter app
➡React Native/Flutter Firebase
•Customize Material Components for your product
➡Material Components UI/UX
•Build great Material Design products across platforms
➡Material Design (Design/Develop/Tools)

31. Flutter
Code beautiful UI with Flutter and Material Design

32. Looks like Google’s Brand…

33. The guidance our designer gave us

34. Material Components

35. Live Coding

36. (1)Theme

37. (1)Theme
Tools for picking colors(material.io/Design)
https://material.io/design/color/the-color-system.html#tools-for-picking-colors

38. (1)Theme
colors.dart

39. (1)Theme
app.dart

40. (1)Theme
app.dart

41. (2)Button Color

42. (2)Button Color

43. (3)Font

44. (3)Font
fonts/*.ttf
pubspec.yaml

45. (3)Font

46. (4)Button Shape

47. (4)Button Shape

48. (5)TextField Edge

49. (5)TextField Edge
login.dart

50. (5)TextField Edge

51. (5)TextField Edge
…
supplemental/cut_corners_border.dart

52. (5)TextField Edge
login.dart

53. (6)Animation

54. (6)Animation

55. (7)Flutter Widget Inspector

56. (7)Flutter Widget Inspector

57. Summary
•Material Components Cool UI/UX
•Hot Reload
• (Firebase,Reactive )
•Codelabs ( 9 )
•Flutter Write Your First Flutter App
•Flutter Building Beautiful UIs with Flutter
MDC Series 101/102/103/104
https://codelabs.developers.google.com/?cat=Flutter

58. Watch OS by Google

59. Sandbox

60. I/O 2018Sandbox

61. Sessions about Wear OS
•What's new in Wear OS by Google
•https://www.youtube.com/watch?v=VZVosFzD9NU

62. Wear OS Watch

63. Update

64. 3

65. Google Assistant
Talk to Watch Text To Speech Suggestion Chips

66. Create Actions for Wear OS

67. Kotlin DSL

68. WatchFace(600+Line→15Line)

69. References
•Flutter
https://flutter.io
•MATERIAL DESIGN
https://material.io
•Google Codelabs (Flutter)
https://codelabs.developers.google.com/?cat=Flutter
•Flutter Sessions on I/O 2018
https://events.google.com/io/schedule/?topic=flutter
•Wear OS Session on I/O 2018
https://www.youtube.com/watch?v=VZVosFzD9NU
•Wear OS by Google [Android Developers]
https://developer.android.com/wear/

70. - Please let me know if you have any requests
such as technical speeches, technical writings and so on.
Facebook:http://fb.com/kanbara.kenichi
Google+:+Kenichi Kambara
LinkedIn:http://www.linkedin.com/in/korodroid
Twitter:@korodroid
Thank you so much.