Flutter Overview - AppDojo June 2018

AppDojoの資料です。

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

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