Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter with Platform

E1239af264c3aac76509604f1d6ef1cd?s=47 najeira
July 14, 2020

Flutter with Platform

E1239af264c3aac76509604f1d6ef1cd?s=128

najeira

July 14, 2020
Tweet

Transcript

  1. Flutter with platform @najeira 2020/07/14 1 1

  2. . Flutterからプラットフォームの処理(コー ド)を呼び出す . Flutter内にプラットフォームのUIを表⽰す る 2 2 Flutter with

    platform Flutter with platform
  3. . Flutterからプラットフォームの処理(コー ド)を呼び出す 3 3 Flutter with platform Flutter with

    platform
  4. 今⽇の例では Pluginを使わずに アプリからプラットフォームを使う 4 4 Flutter with platform Flutter with

    platform
  5. MethodChannel Flutterとプラットフォームの やり取りには MethodChannel を使う 5 5 Flutter with platform

    Flutter with platform
  6. MethodChannel Dart: const channel = MethodChannel('my channel'); 'my channel'はチャンネルの名前 他のchannelと名前が衝突しないように

    6 6 Flutter with platform Flutter with platform
  7. invokeMethod Dart: await channel.invokeMethod<String>('hello'); 'hello'は呼び出したい処理の名前 この例ではString型のデータが返ってくる 7 7 Flutter with

    platform Flutter with platform
  8. Android public class MainActivity extends FlutterActivity implements MethodChannel.MethodCallHandler { @Override

    public void configureFlutterEngine(@NonNull Flutte super.configureFlutterEngine(flutterEngine); MethodChannel channel = new MethodChannel( flutterEngine.getDartExecutor().getBinaryMesse "my channel"); channel.setMethodCallHandler(this); } 8 8 Flutter with platform Flutter with platform
  9. Android public void onMethodCall(MethodCall call, MethodChannel.Result result) { switch (call.method)

    { case "hello": result.success("Android!"); break; default: result.notImplemented(); break; } } 9 9 Flutter with platform Flutter with platform
  10. iOS @objc class AppDelegate: FlutterAppDelegate { override func application(...) ->

    Bool { let fvc : FlutterViewController = window?.rootViewController as! FlutterViewCont let channel = FlutterMethodChannel( name: "my channel", binaryMessenger: fvc.binaryMessenger) channel.setMethodCallHandler(self.handle) 10 10 Flutter with platform Flutter with platform
  11. iOS func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) -> Void

    { switch call.method { case "hello": result("iOS!") default: result(FlutterMethodNotImplemented) } } 11 11 Flutter with platform Flutter with platform
  12. プラットフォーム固有の機能を呼び出し その結果を受け取って UI は Flutter で作る ……というのがオススメ 12 12 Flutter

    with platform Flutter with platform
  13. しかしやむを得ず プラットフォーム側の画⾯ Activity, ViewController を表⽰したいときもある 13 13 Flutter with platform

    Flutter with platform
  14. Android MainActivity(FlutterActivity)が 1つ存在し そこにFlutterViewが乗っており その中にFlutterアプリが描画されている 14 14 Flutter with platform

    Flutter with platform
  15. Android MainActivity(FlutterActivity)を起点に 普通のAndroidアプリのように 別のActivityを表⽰(start)できる 15 15 Flutter with platform Flutter

    with platform
  16. Android MainActivity: private MethodChannel.Result mResult; public void onMethodCall(MethodCall call, MethodChannel.Result

    result) { switch (call.method) { case "text": mResult = result; Intent intent = new Intent(this, MyActivity.class); startActivityForResult( intent, REQUEST_CODE); 16 16 Flutter with platform Flutter with platform
  17. Android MyActivity: Intent intent = new Intent(); intent.putExtra("data", editText.getText().toString( setResult(RESULT_OK,

    intent); finish(); 17 17 Flutter with platform Flutter with platform
  18. Android MainActivity: protected void onActivityResult(int requestCode, int if (requestCode ==

    REQUEST_CODE) { if (resultCode == RESULT_OK) { mResult.success(data.getStringExtra("data")); } else { mResult.success("cancel"); } mResult = null; } else { super.onActivityResult(requestCode, resultCode, } } 18 18 Flutter with platform Flutter with platform
  19. iOS FlutterViewControllerが 1つ存在し(rootViewController) そこにFlutterViewが乗っており その中にFlutterアプリが描画されている 19 19 Flutter with platform

    Flutter with platform
  20. iOS FlutterViewControllerを起点に 別のViewControllerを表⽰(present)できる 20 20 Flutter with platform Flutter with

    platform
  21. iOS AppDelegate: var flutterResult: FlutterResult? func handle(_ call: FlutterMethodCall, result:

    @escaping FlutterResult) -> Void { switch call.method { case "text": flutterResult = result let vc = MyViewController() vc.delegate = self window?.rootViewController?.present( vc, animated: true, completion: nil) 21 21 Flutter with platform Flutter with platform
  22. iOS MyViewController: delegate?.textDidEdit(editText.text) self.dismiss(animated: true, completion: nil) AppDelegate: func textDidEdit(_

    text: String) { flutterResult?(text) flutterResult = nil } 22 22 Flutter with platform Flutter with platform
  23. iOS rootをUINavigationControllerに差し替え override func application(...) -> Bool { let fvc

    : FlutterViewController = window?.rootViewController as! FlutterViewContro let nav = UINavigationController.init( rootViewController: fvc) nav.isNavigationBarHidden = true window.rootViewController = nav flutterViewController = fvc 23 23 Flutter with platform Flutter with platform
  24. iOS var flutterViewController: FlutterViewController? override func registrar(forPlugin: String) -> Flutte

    return (self.flutterViewController?.registrar(forP } override func hasPlugin(_ pluginKey: String) -> Bool return (self.flutterViewController?.hasPlugin(plug } override func valuePublished(byPlugin pluginKey: Str return (self.flutterViewController?.valuePublished } 24 24 Flutter with platform Flutter with platform
  25. iOS Issue: ViewControllerの操作が 背後のFlutterに渡されてしまう Workaround: https://github.com/flutter/flutter/issues/ 35784#issuecomment-516243057 25 25 Flutter

    with platform Flutter with platform
  26. プラットフォーム画⾯ テキスト⼊⼒や 画像ピッカーなど プラットフォーム側で画⾯を 作るほうが楽なときに活⽤ 26 26 Flutter with platform

    Flutter with platform
  27. プラットフォーム画⾯ 基本はFlutterでアプリを作っていき 画⾯遷移の末端で プラットフォーム画⾯を利⽤する のがオススメ 27 27 Flutter with platform

    Flutter with platform
  28. プラットフォーム画⾯ 問題がおきにくい: Flutter画⾯ -> Flutter画⾯ -> プラットフォーム画⾯ -> プラットフォーム画⾯ 28

    28 Flutter with platform Flutter with platform
  29. プラットフォーム画⾯ 避けたほうが無難: Flutter画⾯ -> プラットフォーム画⾯ -> Flutter画⾯ -> プラットフォーム画⾯ 29

    29 Flutter with platform Flutter with platform
  30. . Flutter内にプラットフォームのUIを表⽰す る 30 30 Flutter with platform Flutter with

    platform
  31. Flutterの画⾯のなかに プラットフォームのUIを インラインに表⽰することも可能 31 31 Flutter with platform Flutter with

    platform
  32. . Texture . Platform View 32 32 Flutter with platform

    Flutter with platform
  33. Texture 例: video_player camera 33 33 Flutter with platform Flutter

    with platform
  34. Texture Dart Texture Android SurfaceTextureEntry android.graphics.SurfaceTexture android.view.Surface iOS FlutterTexture 34

    34 Flutter with platform Flutter with platform
  35. Platform View 例: webview_flutter google_maps_flutter 広告 35 35 Flutter with

    platform Flutter with platform
  36. Platform View Dart AndroidView UiKitView Android PlatformView iOS FlutterPlatformView 36

    36 Flutter with platform Flutter with platform
  37. まとめ Flutter⾃⾝も Activity / ViewController なので 別のプラットフォームの画⾯と⾏き来できる Texture, Platform View

    を使って Flutterの画⾯内にインラインに プラットフォームUIを表⽰できる 37 37 Flutter with platform Flutter with platform
  38. Links https://flutter.dev/docs/development/platform -integration/platform-channels https://flutter.dev/docs/development/package s-and-plugins/developing-packages https://gist.github.com/najeira/c9ac5ae0519c c01635d234bfd7465451 38 38 Flutter

    with platform Flutter with platform