Flutter Overview - AppDojo June 2018

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What’s Flutter

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Question

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Flutter Documentation 17 https://flutter.io/docs/ Flutter for Web devs Flutter for Android devs Flutter for iOS devs Flutter for React Native devs

Slide 18

Slide 18 text

Dev Flow

Slide 19

Slide 19 text

Develop & Release flow 19 Develop Build Release Setup

Slide 20

Slide 20 text

Develop & Release flow 20 Develop Build Release Setup

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Develop & Release flow 24 Develop Build Release Setup

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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 {

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Google I/O 2018

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Material Design (io18)

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Material Design Flutter

Slide 36

Slide 36 text

Firebase (io18)

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Configure Flutter Plugin for iOS

Slide 41

Slide 41 text

Configure Flutter Plugin for Android

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Flutter (io18)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Appendix (io18)

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Appendix - Flutter Hot Reload Game

Slide 59

Slide 59 text

Appendix

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

SpeakerDeck https://speakerdeck.com/rkowase

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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