$30 off During Our Annual Pro Sale. View Details »

What's Add2App project?(Flutter)

What's Add2App project?(Flutter)

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

kosuke matsumura

March 26, 2019
Tweet

More Decks by kosuke matsumura

Other Decks in Technology

Transcript

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

    View Slide

  2. About Me
    • দଜߤ༟(Kosuke Matsumura)
    • NAVITIME JAPAN Co., Ltd.

    Android/iOS Developer
    • Kawasaki Frontale Supporter
    • Twitter

    m.kosuke @kosuke_mtm

    View Slide

  3. Add2App project

    View Slide

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

    View Slide

  5. OUTLINE

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  9. SETUP

    View Slide

  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`

    View Slide

  11. SETUP
    Create “Flutter module”
    $ flutter create -t module my_flutter
    In the Flutter module project, there are hidden subfolder:

    `.android/` and `.ios/`

    View Slide

  12. SETUP -Android-

    View Slide

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


    View Slide

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

    View Slide

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

    }

    View Slide

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

    View Slide

  17. SETUP -iOS-

    View Slide

  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`

    View Slide

  19. SETUP -iOS-
    Disable bitcode

    As Flutter does not support bitcode now.

    View Slide

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


    View Slide

  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

    View Slide

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

    Drag after `Target Dependencies`

    View Slide

  23. USING in Native Code

    View Slide

  24. USING -Android-

    View Slide

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

    View Slide

  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”?

    View Slide

  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'));
    }
    }

    View Slide

  28. USING -iOS-

    View Slide

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

    View Slide

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

    View Slide

  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:…
    }

    View Slide

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


    View Slide

  33. Back to NativeCode

    View Slide

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

    View Slide

  35. Hot Reload

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  39. Method Channel

    View Slide

  40. Method Channel
    • Official

    https://flutter.dev/docs/development/platform-integration/
    platform-channels
    • Qiita

    https://qiita.com/mkosuke/items/
    b384035e507ad0208c10

    View Slide

  41. Thank you for your attention.

    View Slide

  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

    View Slide