Flutter Overview - AppDojo June 2018

Flutter Overview - AppDojo June 2018

AppDojoの資料です。

App Dojo June 2018 - トップ
https://events.withgoogle.com/app-dojo-june-2018/

3be52a14c8c58209263d7f83204b8dc7?s=128

Rui Kowase

June 26, 2018
Tweet

Transcript

  1. Flutter Overview Rui Kowase @rkowase 2018/06/26 AppDojo June 2018

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

    @rkowase Skill: Flutter, Android, etc...
  3. Flutter Meetup Tokyo https://flutter-jp.connpass.com/event/90790/

  4. What’s Flutter

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

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

    frameworks • Delightful & flexible tooling https://www.dartlang.org/
  7. What’s New in Release Preview 1 https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a • Fundamentals ◦

    Material Design Widget ◦ Dart 2 • Ecosystem ◦ Firebase ◦ AdMob • Tooling ◦ Android Studio ◦ IntelliJ IDE ◦ VS Code
  8. GitHub stars https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a

  9. Flutter events happening around the world https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a

  10. Expressive, beautiful UIs https://flutter.io/

  11. None
  12. Feature • Build beautiful native apps in record time •

    Fast development • Expressive, beautiful UIs • Modern, reactive framework • Access native features and SDKs • Unified app development https://flutter.io/
  13. Flutter System Architecture https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit

  14. Question

  15. Question Are you • Web dev? • Android dev? •

    iOS dev? • React Native dev? 15
  16. Flutter Documentation 16 https://flutter.io/docs/

  17. Flutter Documentation 17 https://flutter.io/docs/ Flutter for Web devs Flutter for

    Android devs Flutter for iOS devs Flutter for React Native devs
  18. Dev Flow

  19. Develop & Release flow 19 Develop Build Release Setup

  20. Develop & Release flow 20 Develop Build Release Setup

  21. Dart 2 21 https://www.dartlang.org/dart-2

  22. Dart 2 in Flutter 22 https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter

  23. Dart 1 to Dart 2 23 Container( padding: EdgeInsets.all(16.0), child:

    Text("Flutter") ), Dart 1 new Container( padding: const EdgeInsets.all(16.0), child: new Text("Flutter") ), Dart 2
  24. Develop & Release flow 24 Develop Build Release Setup

  25. Build production app for Android - Step1 (Create key.properties) 25

    storePassword=<password from previous step> keyPassword=<password from previous step> keyAlias=key storeFile=<location of the key store file, e.g. /Users/<username>/key.jks>
  26. Build production app for Android - Step2 (Edit build.gradle) 26

    +def keystorePropertiesFile = rootProject.file("key.properties") +def keystoreProperties = new Properties() +keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) android {
  27. Build production app for Android - Step3 (Edit build.gradle) 27

    +signingConfigs { + release { + keyAlias keystoreProperties['keyAlias'] + keyPassword keystoreProperties['keyPassword'] + storeFile file(keystoreProperties['storeFile']) + storePassword keystoreProperties['storePassword'] + } +} +buildTypes { + release { + signingConfig signingConfigs.release + } +}
  28. Build production app for Android - Step4 (flutter build apk)

    28 $ flutter build apk Initializing gradle... 1.0s Resolving dependencies... 8.1s Running 'gradlew assembleRelease'... Skipping AOT snapshot build. Fingerprint match. Built build/app/outputs/apk/release/app-release.apk (9.2MB).
  29. Google I/O 2018

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

  31. 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
  32. Material Design (io18)

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

  34. 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
  35. Material Design Flutter

  36. Firebase (io18)

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

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

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

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

  41. Configure Flutter Plugin for Android

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

  43. Flutter (io18)

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

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

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

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

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

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

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

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

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

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

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

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

    Framework ⚡
  56. Appendix (io18)

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

  58. Appendix - Flutter Hot Reload Game

  59. Appendix

  60. 事前にいただいた質問 今はまだβ版ですが、あとどのような機能が追加さ れると、FIXと呼べると思いますでしょうか。個人的 な主観で構いませんので、お話いただけると参考 になります。

  61. SpeakerDeck https://speakerdeck.com/rkowase

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

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

  64. Flutter Meetup Tokyo https://flutter-jp.connpass.com/event/90790/

  65. Thank you