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
   

   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