This document discusses communication between Flutter and native modules. It introduces platform channels as the gateway for accessing platform-specific code in Flutter. Platform channels use the MethodChannel class to define communication between Flutter and native platforms. The document demonstrates how to invoke native platform methods and return responses from Flutter using platform channels. It provides code examples for defining platform channels in Dart and handling calls in Android native code.

1. Communication between Flutter
and
native modules Baby Step
Speaker. 장인수

2. Introduce
현) Woowahan Bros. / Baemin Market Mobile platform Development
HydaiCapital / Mobile Platform Development
SOCAR Mobile Developer / Mobile , Tablet
DreamPlus with Hanwha S&C / ZUMO Application
Lassoh inc. (Toronto in Canada) / Mobile SNS platform
Samsung Mobile Group / 갤럭시 시리즈 개발.

3. Agenda
- About Flutter
- Flutter Platform Channel
- Demo
- Q & A (?)

4. About Flutter
Flutter is Google's mobile UI framework

5. About Flutter
Flutter is a cross-platform mobile SDK

6. Fast development

7. Expressive and Flexible UI

8. Native Performance

9. Free and open source

10. Flutter History
Announcing Flutter 1.0
Current Version
v1.4.1
The First Release
Announcing Flutter Release Preview 2
2017 MAY 2018 SEP 2018 DEC 2019 NOW

11. x 1.5

12. 2,169
Watch

13. 59,136
Stars

14. 6,463
Forks

15. 370
Contributors

18. StackOverflow trend

24. Flutter Structure
Native Code
Widgets,
Rendering
Platform
Channels
Canvas
Events
Location Bluetooth
Audio Sensors
Camera Etc.
Service
Platform
Application

25. Platform Channels Overview

26. Platform Channels

27. About Platform Channels
Platform channels are the gateway to accessing
platform-specific code in Flutter.

28. About Platform Channels
What do I mean by platform-specific?

29. About Platform Channels
Access to device inputs
Secure storage (a.k.a. keychain on iOS)

30. About Platform Channels
The Basic building block for
creating plugins

32. About Platform Channels
MethodChannel class is defined
inside the ‘service’ package.

33. import 'package:flutter/services.dart';

34. About Platform Channels
Need to import the ‘async’ package to support async
features in our dart codebase.

35. import 'dart:async';
Need to import the ‘async’ package to support async features in our dart codebase.

36. static const channel =
const MethodChannel('droidknights.github.io/flutter_BabyStep');
To define MethodChannel in dart we use :
Like this…
You can name it anything, but the best practice is to name
it domain_name/channel_name.

37. final response = await channel.invokeMethod(message, [optional_arguments])
You can name it anything, but the best practice is to name
it domain_name/channel_name.

38. Future<Null> _showDialog() async {
final response =
await channel.invokeMethod("showDialog", [“. . .”//전달메세지]);
final snackbar = new SnackBar(content: new Text(response));
Scaffold.of(context).showSnackBar(snackbar);
}

39. Future<Null> _openNewPage() async {
final response =
await channel.invokeMethod("openPage", [“. . .” //전달메세지]);
print(response);
}

40. Future<Null> _requestNetwork() async {
final response = await channel.invokeMethod(
"request", [“. . . .(URL)”]);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SecondRoute(data: response),
),
);
}

41. class MainActivity : FlutterActivity() {
...
}

42. val channel = MethodChannel(flutterView, "droidknight.github.io/
platformchannel”)

43. channel.setMethodCallHandler { methodCall, result ->
val args = methodCall.arguments as List<*>
val param = args.first() as String
when (methodCall.method) {
"openPage" -> openSecondActivity(param)
"showDialog" -> showDialog(param, result)
"request" -> callService(param, result)
else -> return@setMethodCallHandler
}
}

44. private fun openSecondActivity(info: String) {
startActivity<SecondActivity>("info" to info)
}

45. private fun showDialog(content: String, channelResult: MethodChannel.Result)
{
MaterialDialog.Builder(this).title(“Android Dialog").theme(Theme.LIGHT)
.content(content)
.positiveText("Ok")
.negativeText("Cancel")
.onPositive { _, _ -> channelResult.success("Ok was clicked") }
.onNegative { _, _ -> channelResult.success("Cancel was
clicked") }
.show()
}

46. private fun callService(url: String, channelResult: MethodChannel.Result) {
...
service.teams().enqueue(object : Callback<ResponseData> {
override fun onFailure(call: Call<ResponseData>?, t: Throwable?) {
… // Fail 처리
}
override fun onResponse(call: Call<ResponseData>?, response:
Response<ResponseData>?) {
// 성공처리
channelResult.success(Gson().toJson(response?.body()?.teams))
}
})
}

47. DEMO

49. Q & A

50. 감사합니다.