$30 off During Our Annual Pro Sale. View Details »

Flutter Overview - AppDojo June 2018

Flutter Overview - AppDojo June 2018

AppDojoの資料です。

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

Rui Kowase

June 26, 2018
Tweet

More Decks by Rui Kowase

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. What’s
    Flutter

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  8. GitHub stars
    https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

  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/

    View Slide

  13. Flutter System Architecture
    https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit

    View Slide

  14. Question

    View Slide

  15. Question
    Are you
    ● Web dev?
    ● Android dev?
    ● iOS dev?
    ● React Native dev?
    15

    View Slide

  16. Flutter Documentation
    16
    https://flutter.io/docs/

    View Slide

  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

    View Slide

  18. Dev Flow

    View Slide

  19. Develop & Release flow
    19
    Develop Build Release
    Setup

    View Slide

  20. Develop & Release flow
    20
    Develop Build Release
    Setup

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  24. Develop & Release flow
    24
    Develop Build Release
    Setup

    View Slide

  25. Build production app for Android - Step1 (Create key.properties)
    25
    storePassword=
    keyPassword=
    keyAlias=key
    storeFile=/key.jks>

    View Slide

  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 {

    View Slide

  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
    + }
    +}

    View Slide

  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).

    View Slide

  29. Google I/O
    2018

    View Slide

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

    View Slide

  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

    View Slide

  32. Material
    Design
    (io18)

    View Slide

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

    View Slide

  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

    View Slide

  35. Material Design Flutter

    View Slide

  36. Firebase
    (io18)

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  40. Configure Flutter Plugin for iOS

    View Slide

  41. Configure Flutter Plugin for Android

    View Slide

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

    View Slide

  43. Flutter
    (io18)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. Appendix
    (io18)

    View Slide

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

    View Slide

  58. Appendix - Flutter Hot Reload Game

    View Slide

  59. Appendix

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. Thank you

    View Slide