What's Add2App project?(Flutter)

About Flutter Add2App project.
How to use Flutter from existing Android/iOS project.

Transcript

1. What’s Add2App project Flutter Meetup Tokyo #8 2019/3/26 Kosuke Matsumura
2. About Me • দଜߤ༟(Kosuke Matsumura) • NAVITIME JAPAN Co., Ltd.
 Android/iOS Developer • Kawasaki Frontale Supporter • Twitter
 m.kosuke @kosuke_mtm
3. Add2App project
4. Add2App project • Make it easy to add Flutter on existing application • In preview(as of 2019.3.17) • Available in master channel
5. OUTLINE
6. 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
7. 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
8. 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
9. SETUP
10. 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`
11. SETUP Create “Flutter module” $ flutter create -t module my_flutter In the Flutter module project, there are hidden subfolder:
 `.android/` and `.ios/`
12. SETUP -Android-
13. SETUP -Android- Add compile option: using java1.8 build.gradle android { compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 }
 …
14. 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' ))
15. SETUP -Android- Introduce an implementation dependency on the Flutter module from app app/build.gradle dependencies { implementation project(‘:flutter') … }
16. SETUP -Android- [optional] Apply AndroidX to the Flutter module project ɾExecute on Android Project(not Flutter module project) ɾYou should correct import manually
17. SETUP -iOS-
18. 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`
19. SETUP -iOS- Disable bitcode
 As Flutter does not support bitcode now.
20. SETUP -iOS- Add a build phase for building Dart code

21. 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
22. SETUP -iOS- Add a build phase for building Dart code
 Drag after `Target Dependencies`
23. USING in Native Code
24. USING -Android-
25. USING -Android- As a View MainActivity.kt val flutterView = Flutter.createView( this, // Activity lifecycle, // Lifecycle "route1" ) Talk about this later
26. USING -Android- As a Fragment MainActivity.kt val transaction = supportFragmentManager.beginTransaction() transaction.replace(R.id.container, Flutter.createFragment(“route2”)) transaction.commit() What is “route”?
27. 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')); } }
28. USING -iOS-
29. USING -iOS- AppDelegate.swift import Flutter Replace super class with `FlutterAppDelegate` } FlutterAppDelegate.swift @interface FlutterAppDelegate: UIResponder <UIApplicationDelegate, …> @UIApplicationMain class AppDelegate: FlutterAppDelegate {
30. USING -iOS- AppDelegate.swift import Flutter Case of using Flutter plugin } @UIApplicationMain class AppDelegate: FlutterAppDelegate {
31. 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:… }
32. USING -iOS- ViewController.swift let flutterViewController = FlutterViewController() flutterViewController.setInitialRoute(“route3") present(flutterViewController, animated: false, completion: nil) Call Flutter from ViewController

33. Back to NativeCode
34. Back to NativeCode main.dart SystemNavigator.pop(); Call Flutter from ViewController
35. Hot Reload
36. 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.
37. 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
38. 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
39. Method Channel
40. Method Channel • Official
 https://flutter.dev/docs/development/platform-integration/ platform-channels • Qiita
 https://qiita.com/mkosuke/items/ b384035e507ad0208c10
41. Thank you for your attention.
42. 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