Flutter with Platform

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