What's Add2App project?(Flutter)

What's Add2App project?(Flutter)

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

Ce18930152c00f0ad254384819553184?s=128

kosuke matsumura

March 26, 2019
Tweet

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