Flutter Overview++ (Google I/O 2018)

Flutter Overview++ (Google I/O 2018)

3be52a14c8c58209263d7f83204b8dc7?s=128

Rui Kowase

May 31, 2018
Tweet

Transcript

  1. Flutter Overview++ (Google I/O 2018) Rui Kowase @rkowase 2018/05/31 Flutter

    Meetup Tokyo #2
  2. Profile • Name: Rui Kowase / 小和瀬 塁 • Account:

    @rkowase Skill: Flutter, Android, etc...
  3. Flutter Overview++ ++

  4. What’s Flutter Flutter makes it easy and fast to build

    beautiful mobile apps. https://github.com/flutter/flutter
  5. Dart 2 • A client-optimized language • Rich & powerful

    frameworks • Delightful & flexible tooling https://www.dartlang.org/
  6. 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
  7. 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
  8. Google I/O sessions 2 Sessions 6 Sessions x3 https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions

  9. 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
  10. Material Design

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

  12. 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
  13. Material Design Flutter

  14. Firebase

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

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

  17. How to integrate 1. Signed up for a Firebase account

    2. Create a Firebase project 3. Platform-specific Firebase configuration ◦ Configure iOS ◦ Configure Android
  18. Configure Flutter Plugin for iOS

  19. Configure Flutter Plugin for Android

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

  21. Flutter

  22. Handling state • Flutter & state - setState() • State

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

  24. Pros/Cons - setState() • Access state ❌ • Updating on

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

  26. Pros/Cons - InheritedWidget • Access state ✅ • Notify other

    widgets ✅ • Mutating state ❌
  27. Sample App - Shopping Cart https://www.youtube.com/watch?v=RS36gBEp8OI

  28. ScopedModel • External Package • Build on InheritedWidget • Access,

    Update & Mutate https://pub.dartlang.org/ packages/scoped_model
  29. Pros/Cons - ScopedModel • Access state ✅ • Notify other

    widgets ✅ • Minimal rebuild ❌
  30. RxDart & StreamBuilder https://www.youtube.com/watch?v=RS36gBEp8OI

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

  32. Pros/Cons - BLoC & Stream • Access state ✅ •

    Updating on change ✅ • Mutating state ✅
  33. Summary • Material Design Flutter • Firebase Flutter • Reactive

    Framework ⚡
  34. Appendix

  35. Appendix - Build reactive mobile apps with Flutter (Google I/O

    '18) メモ - Qiita https://qiita.com/rkowase/items/23ee4264d54e7890d919
  36. Appendix - Google I/O 2018で聞いたFlutter関連の質問 - Qiita https://qiita.com/rkowase/items/43ecf5bb5bf9a4eac61f

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

  38. Appendix - Flutter Hot Reload Game

  39. Thank you