Flutter with Platform

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