Flutter Overview++ (Google I/O 2018) Rui Kowase @rkowase 2018/05/31 Flutter Meetup Tokyo #2

Profile ● Name: Rui Kowase / 小和瀬 塁 ● Account: @rkowase Skill: Flutter, Android, etc...

Flutter Overview++ ++

What’s Flutter Flutter makes it easy and fast to build beautiful mobile apps. https://github.com/flutter/flutter

Dart 2 ● A client-optimized language ● Rich & powerful frameworks ● Delightful & flexible tooling https://www.dartlang.org/

Ready for Production Apps: Flutter Beta 3 https://developers.googleblog.com/2018/05/ready-for-production-apps-flutter-beta-3.html ● Flutter offers ○ High-velocity development ○ Expressive and flexible designs ○ High-quality experiences ● Roadmap to Release ○ Performance and size ○ Compatibility ○ Ecosystem

What’s New in Flutter Beta 3 https://medium.com/flutter-io/flutter-beta-3-7d88125245dc ● Fundamentals ○ Material Design Widget ○ Dart 2 ● Ecosystem ○ Firebase ○ AdMob ● Tooling ○ Android Studio ○ IntelliJ IDE ○ VS Code

Google I/O sessions 2 Sessions 6 Sessions x3 https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions

Flutter sessions ● Flutter & Design ○ Customize Material Components for your product ○ Build great Material Design products across platforms ○ Code beautiful UI with Flutter and Material Design ● Flutter & Firebase ○ Total mobile development made fun with Flutter and Firebase ○ Add Firebase to your cross-platform React Native or Flutter app ● Flutter ○ Build reactive mobile apps with Flutter https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions

Material Design

Material Design Roadmap https://github.com/material-compone nts/material-components/blob/develo p/ROADMAP.md

Material Components Support (May 2018) Android (1.0.0-alpha1) iOS (55.0.2) Web (0.35.1) Flutter (Beta 3) Color theme components 8 / 16 12 / 16 9 / 16 16 / 16 Type theme components 7 / 10 9 / 10 5 / 10 10 / 10 Expanded set of components 1 / 3 2 / 3 0 / 3 3 / 3 Shape parameter 0 / 2 2 / 2 2 / 2 2 / 2 https://github.com/material-components/material-components/blob/develop/ROADMAP.md

Material Design Flutter

Firebase

Firebasde Integration https://www.youtube.com/watch?v=8wQ_MorYCEk

Available FlutterFire plugins https://github.com/flutter/plugins/blob/master/FlutterFire.md

How to integrate 1. Signed up for a Firebase account 2. Create a Firebase project 3. Platform-specific Firebase configuration ○ Configure iOS ○ Configure Android

Configure Flutter Plugin for iOS

Configure Flutter Plugin for Android

Getting started with Firebase and Flutter https://firebase.google.com/docs/flutter/setup

Flutter

Handling state ● Flutter & state - setState() ● State & widget tree - InheritedWidget() ● Reactive with streams - BLoC & Stream https://www.youtube.com/watch?v=RS36gBEp8OI

Flutter & state - setState https://www.youtube.com/watch?v=RS36gBEp8OI

Pros/Cons - setState() ● Access state ❌ ● Updating on change ❌

State & widget tree - InheritedWidget https://www.youtube.com/watch?v=RS36gBEp8OI

Pros/Cons - InheritedWidget ● Access state ✅ ● Notify other widgets ✅ ● Mutating state ❌

Sample App - Shopping Cart https://www.youtube.com/watch?v=RS36gBEp8OI

ScopedModel ● External Package ● Build on InheritedWidget ● Access, Update & Mutate https://pub.dartlang.org/ packages/scoped_model

Pros/Cons - ScopedModel ● Access state ✅ ● Notify other widgets ✅ ● Minimal rebuild ❌

RxDart & StreamBuilder https://www.youtube.com/watch?v=RS36gBEp8OI

Reactive with streams - BLoC & Stream https://www.youtube.com/watch?v=RS36gBEp8OI

Pros/Cons - BLoC & Stream ● Access state ✅ ● Updating on change ✅ ● Mutating state ✅

Summary ● Material Design Flutter ● Firebase Flutter ● Reactive Framework ⚡

Appendix

Appendix - Build reactive mobile apps with Flutter (Google I/O '18) メモ - Qiita https://qiita.com/rkowase/items/23ee4264d54e7890d919

Appendix - Google I/O 2018で聞いたFlutter関連の質問 - Qiita https://qiita.com/rkowase/items/43ecf5bb5bf9a4eac61f

Appendix - Flutter Showcase https://flutter.io/showcase/

Appendix - Flutter Hot Reload Game

Thank you