Flutter communicate with Native code (iOS, Android)

Agenda

- About Flutter
- Flutter Platform Channel
- Demo
- Q & A

Transcript

1. 'MVUUFSীࢲ
   /BUJWF J04
   "OESPJE
   ௏٘৬
   ాनೞӝ
   ੢ੋࣻ
2. *OUSPEVDF അ) 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. "HFOEB  "CPVU
   'MVUUFS
    'MVUUFS
   1MBUGPSN
   $IBOOFM
    %FNP
    2
   
   "
   
4. "CPVU
   'MVUUFS Flutter is Google's mobile UI framework
5. "CPVU
   'MVUUFS 'MVUUFS
   JT
   B
   DSPTTQMBUGPSN
   NPCJMF
   4%,
6. Flutter
7. Fast Beautiful Open Productive Flutter
8. Fast Beautiful Open Productive Flutter
9. /BUJWF
   1FSGPSNBODF
10. Fast Beautiful Open Productive Flutter
11. &YQSFTTJWF
    BOE
    'MFYJCMF
    6*
12. Fast Beautiful Open Productive Flutter
13. 'BTU
    EFWFMPQNFOU
14. Fast Beautiful Open Productive Flutter
15. 'SFF
    BOE
    PQFO
    TPVSDF
16. 'MVUUFS
    )JTUPSZ "OOPVODJOH
    'MVUUFS
     $VSSFOU
    7FSTJPO v1.7 The First Release "OOPVODJOH
    'MVUUFS
    3FMFBTF
    1SFWJFX
     
    .": 
    4&1 
    %&$ 
    /08
18. 2,366 Watch
19. 71,268 Stars
20. 8,432 Forks
21. 421 Contributors
24. 4UBDL0WFSGMPX
    USFOE
25. 4UBDL0WFSGMPX
    USFOE
31. 'MVUUFS
    4USVDUVSF Native Code Widgets, Rendering Platform Channels Canvas Events Location Bluetooth Audio Sensors Camera Etc. Service Platform Application
32. 'MVUUFS
    4USVDUVSF Native Code Widgets, Rendering Platform Channels Canvas Events Location Bluetooth Audio Sensors Camera Etc. Service Platform Application
33. "CPVU
    'MVUUFS
    1MBUGPSN
    $IBOOFMT
    5ZQF 
    .FTTBHF
    $IBOOFM 
    .FUIPE
    $IBOOFM 
    &WFOU
    $IBOOFM
34. 8SJUF
    DVTUPN
    QMBUGPSNTQFDJGJD
    DPEF Use Platform Channels
35. 1MBUGPSN
    $IBOOFMT
    0WFSWJFX
36. 1MBUGPSN
    $IBOOFMT
    0WFSWJFX
37. 1MBUGPSN
    $IBOOFMT
    0WFSWJFX
38. 1MBUGPSN
    $IBOOFMT
    0WFSWJFX
39. "CPVU
    1MBUGPSN
    $IBOOFMT Platform channels are the gateway to accessing platform-specific code in Flutter.
40. "CPVU
    1MBUGPSN
    $IBOOFMT What do I mean by platform-specific?
41. "CPVU
    1MBUGPSN
    $IBOOFMT Access to device inputs Secure storage (a.k.a. keychain on iOS)
42. "CPVU
    1MBUGPSN
    $IBOOFMT The Basic building block for creating plugins
43. "CPVU
    1MBUGPSN
    $IBOOFMT MyOS Call Device State Camera Check
44. 8IBU
    BCPVU
    QMBUGPSNTQFDJGJD
    DPEF
    Options : 1. Use Plugins 2. Write platform-specific code
45. 6TF
    1MVHJOT
46. 6TF
    1MVHJOT description: A new Flutter application. dependencies: core: path: ../core flutter: sdk: flutter flutter_localizations: sdk: flutter xml: ^3.0.0 flutter_redux: ^0.5.0 intl: ^0.15.2 url_launcher: ^3.0.0 path_provider: ^0.4.0 key_value_store_flutter: ^1.0.0 .... ....
47. "CPVU
    1MBUGPSN
    $IBOOFMT MethodChannel class is defined inside the ‘service’ package.
48. import 'package:flutter/services.dart';
49. "CPVU
    1MBUGPSN
    $IBOOFMT /FFE
    UP
    JNQPSU
    UIF
    rBTZODs
    QBDLBHF
    UP
    TVQQPSU
    BTZOD
    GFBUVSFT
    JO
    PVS
    EBSU
    DPEFCBTF
50. import 'dart:async'; Need to import the ‘async’ package to support async features in our dart codebase.
51. static const channel = const MethodChannel('tryflutter.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.
52. 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.
53. Future<Null> _showDialog() async { final response = await channel.invokeMethod("showDialog", ["Called From Flutter"]); final snackbar = new SnackBar(content: new Text(response)); Scaffold.of(context).showSnackBar(snackbar); }
54. Future<Null> _openNewPage() async { final response = await channel.invokeMethod("openPage", ["Hi From Flutter"]); print(response); }
55. Future<Null> _requestNetwork() async { final response = await channel.invokeMethod( "request", ["https://www.thesportsdb.com/api/v1/json/1/"]); Navigator.push( context, new MaterialPageRoute( builder: (context) => new SecondRoute(data: response), ), ); }
56. class MainActivity : FlutterActivity() { ... }
57. val channel = MethodChannel(flutterView, "tryflutter.github.io/ platformchannel”)
58. 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 } }
59. private fun openSecondActivity(info: String) { startActivity<SecondActivity>("info" to info) }
60. private fun showDialog(content: String, channelResult: MethodChannel.Result) { MaterialDialog.Builder(this).title("Native Dialog").theme(Theme.LIGHT) .content(content) .positiveText("Ok") .negativeText("Cancel") .onPositive { _, _ -> channelResult.success("Ok was clicked") } .onNegative { _, _ -> channelResult.success("Cancel was clicked") } .show() }
61. private fun callService(url: String, channelResult: MethodChannel.Result) { ... service.getEPLTeams().enqueue(object : Callback<TeamResponse> { override fun onFailure(call: Call<TeamResponse>?, t: Throwable?) { channelResult.error("FAILURE", "CALL FAILED", t?.localizedMessage) } override fun onResponse(call: Call<TeamResponse>?, response: Response<TeamResponse>?) { channelResult.success(Gson().toJson(response?.body()?.teams)) } }) }
62. DEMO
64. Q & A
65. хࢎ೤פ׮.