Slide 1

Slide 1 text

What’s Add2App project Flutter Meetup Tokyo #8 2019/3/26 Kosuke Matsumura

Slide 2

Slide 2 text

About Me • দଜߤ༟(Kosuke Matsumura) • NAVITIME JAPAN Co., Ltd.
 Android/iOS Developer • Kawasaki Frontale Supporter • Twitter
 m.kosuke @kosuke_mtm

Slide 3

Slide 3 text

Add2App project

Slide 4

Slide 4 text

Add2App project • Make it easy to add Flutter on existing application • In preview(as of 2019.3.17) • Available in master channel

Slide 5

Slide 5 text

OUTLINE

Slide 6

Slide 6 text

OUTLINE Standard Flutter Project Add2App Project Existing Android/iOS project should import Flutter project as a module. Flutter project includes Android/iOS project from the beginning. Import with CocoaPods Import with cradle

Slide 7

Slide 7 text

OUTLINE $ flutter --version Flutter 1.3.11-pre.34
 • channel master Framework
 • 2019-03-15 22:03:13 -0700 Tools
 • Dart 2.2.1 (build 2.2.1-dev.1.0 None) Execution environment Warning:
 https://github.com/flutter/flutter/wiki/Bad-Builds

Slide 8

Slide 8 text

OUTLINE $ flutter --version Flutter 1.3.11-pre.34
 • channel master Framework
 • 2019-03-15 22:03:13 -0700 Tools
 • Dart 2.2.1 (build 2.2.1-dev.1.0 None) Execution environment Warning:
 https://github.com/flutter/flutter/wiki/Bad-Builds

Slide 9

Slide 9 text

SETUP

Slide 10

Slide 10 text

SETUP Create “Flutter module” $ flutter channel master $ flutter create -t module my_flutter `-t` option is `template`.
 This command create the Flutter module project template.
 Existing Android/iOS project will import this module. set branch to `master`

Slide 11

Slide 11 text

SETUP Create “Flutter module” $ flutter create -t module my_flutter In the Flutter module project, there are hidden subfolder:
 `.android/` and `.ios/`

Slide 12

Slide 12 text

SETUP -Android-

Slide 13

Slide 13 text

SETUP -Android- Add compile option: using java1.8 build.gradle android { compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 }
 …

Slide 14

Slide 14 text

SETUP -Android- Add path to the Flutter module project setting.gradle include ':app' // add below setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, 'my_flutter/.android/include_flutter.groovy' ))

Slide 15

Slide 15 text

SETUP -Android- Introduce an implementation dependency on the Flutter module from app app/build.gradle dependencies { implementation project(‘:flutter') … }

Slide 16

Slide 16 text

SETUP -Android- [optional] Apply AndroidX to the Flutter module project ɾExecute on Android Project(not Flutter module project) ɾYou should correct import manually

Slide 17

Slide 17 text

SETUP -iOS-

Slide 18

Slide 18 text

SETUP -iOS- Setup Podfile
 ※If you don’t have Podfile, execute `pod init` Podfile flutter_application_path = ‘../my_flutter/‘ eval(File.read( File.join(flutter_application_path, ‘.ios’, ‘Flutter’, ‘podhelper.rb’)), binding) And execute `pod install`

Slide 19

Slide 19 text

SETUP -iOS- Disable bitcode
 As Flutter does not support bitcode now.

Slide 20

Slide 20 text

SETUP -iOS- Add a build phase for building Dart code


Slide 21

Slide 21 text

SETUP -iOS- Add a build phase for building Dart code
 Run Script “$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh” build
 “$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

Slide 22

Slide 22 text

SETUP -iOS- Add a build phase for building Dart code
 Drag after `Target Dependencies`

Slide 23

Slide 23 text

USING in Native Code

Slide 24

Slide 24 text

USING -Android-

Slide 25

Slide 25 text

USING -Android- As a View MainActivity.kt val flutterView = Flutter.createView( this, // Activity lifecycle, // Lifecycle "route1" ) Talk about this later

Slide 26

Slide 26 text

USING -Android- As a Fragment MainActivity.kt val transaction = supportFragmentManager.beginTransaction() transaction.replace(R.id.container, Flutter.createFragment(“route2”)) transaction.commit() What is “route”?

Slide 27

Slide 27 text

What is “route”? Dart code is able to receive String main.dar void main() => runApp(_widgetForRoute(window.defaultRouteName)); Widget _widgetForRoute(String route) { switch (route) { case 'route1': return SomeWidget(…); case 'route2': return SomeWidget(…); default: return Center(child: Text('Unknown route: $route')); } }

Slide 28

Slide 28 text

USING -iOS-

Slide 29

Slide 29 text

USING -iOS- AppDelegate.swift import Flutter Replace super class with `FlutterAppDelegate` } FlutterAppDelegate.swift @interface FlutterAppDelegate: UIResponder @UIApplicationMain class AppDelegate: FlutterAppDelegate {

Slide 30

Slide 30 text

USING -iOS- AppDelegate.swift import Flutter Case of using Flutter plugin } @UIApplicationMain class AppDelegate: FlutterAppDelegate {

Slide 31

Slide 31 text

USING -iOS- AppDelegate.swift import Flutter Case of using Flutter plugin @UIApplicationMain class AppDelegate: FlutterAppDelegate { import FlutterPluginRegistrant var flutterEngine: FlutterEngine? override func application(_ application: UIApplication,didFinishLaunching… { self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil) self.flutterEngine?.run(withEntrypoint: nil) GeneratedPluginRegistrant.register(with: self.flutterEngine) return super.application(application, didFinishLaunchingWithOptions:… }

Slide 32

Slide 32 text

USING -iOS- ViewController.swift let flutterViewController = FlutterViewController() flutterViewController.setInitialRoute(“route3") present(flutterViewController, animated: false, completion: nil) Call Flutter from ViewController


Slide 33

Slide 33 text

Back to NativeCode

Slide 34

Slide 34 text

Back to NativeCode main.dart SystemNavigator.pop(); Call Flutter from ViewController

Slide 35

Slide 35 text

Hot Reload

Slide 36

Slide 36 text

Hot Reload $ cd xxxxx/my_flutter $ flutter attach IDE Support Hot Reload for Add2App is in progress. But Flutter command line tools are already present.

Slide 37

Slide 37 text

Hot Reload IDE Support Hot Reload for Add2App is in progress. But Flutter command line tools are already present. Dart Observatory web user interface URL

Slide 38

Slide 38 text

Hot Reload IDE Support Hot Reload for Add2App is in progress. But Flutter command line tools are already present. Dart Observatory web user interface URL

Slide 39

Slide 39 text

Method Channel

Slide 40

Slide 40 text

Method Channel • Official
 https://flutter.dev/docs/development/platform-integration/ platform-channels • Qiita
 https://qiita.com/mkosuke/items/ b384035e507ad0208c10

Slide 41

Slide 41 text

Thank you for your attention.

Slide 42

Slide 42 text

References • Add2App project
 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps • github
 https://github.com/flutter/flutter/projects/28 • Google Developer blog
 https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui- toolkit.html • gitHub
 https://github.com/shcahill/Add2AppSample