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

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

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

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

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

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

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

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

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

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

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

プラットフォーム固有の機能を呼び出し その結果を受け取って UI は Flutter で作る ……というのがオススメ 12 12 Flutter with platform Flutter with platform

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

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

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

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

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

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

iOS FlutterViewControllerが 1つ存在し(rootViewController) そこにFlutterViewが乗っており その中にFlutterアプリが描画されている 19 19 Flutter with platform Flutter with platform

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

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

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

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

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

iOS Issue: ViewControllerの操作が 背後のFlutterに渡されてしまう Workaround: https://github.com/flutter/flutter/issues/ 35784#issuecomment-516243057 25 25 Flutter with platform Flutter with platform

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

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

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

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

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

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

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

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

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

Platform View 例： webview_flutter google_maps_flutter 広告 35 35 Flutter with platform Flutter with platform

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

まとめ Flutter⾃⾝も Activity / ViewController なので 別のプラットフォームの画⾯と⾏き来できる Texture, Platform View を使って Flutterの画⾯内にインラインに プラットフォームUIを表⽰できる 37 37 Flutter with platform Flutter with platform

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