web analytics

Flutter : การเรียก Native code จาก Flutter

สวัสดีผู้อ่านครับ บล็อกนี้พามาลองใช้งานการเรียกใช้ Native code จาก Flutter และการเรียก Flutter จากฝั่ง Native ด้วยครับ ซึ่งอย่างที่รู้ว่า Flutter คือ Cross Platform ที่มี native porject ของ android และ iOS อยู่ โดยปกติทั่วไป Flutter จะไม่ได้ยุ่งกับ Native code ครับ แต่ก็มีงานบางอย่างที่ไม่สามารถทำใน Flutter จำเป็นต้องเรียกใช้งานใน Native ่นต้องการใช้ libray ที่มีใน native หรือความสามารถเฉพาะทางของ OS ที่ใน Flutter ยังไม่รองรับ โดยทางออกสำหรับเรื่องนี้ Flutter จึงได้เตรียมช่องทางให้ทั้งสองฝั่งสามารถติดต่อกัน มาลองเล่นกันครับ

MethodChannel ใน Flutter

ใน Flutter วิธีในการติดต่อกับ native คือทำผ่านคลาสที่ชื่อว่า MethodChannel ซึ่งมันก็เหมือนเราไปเปิดห้องกลางเอาไว้ แล้วก็กำหนดชื่อห้องที่รู้กัน จากนั้นก็ส่งค่าเข้าไป โดยชื่อห้องมักจะกำหนดเป็นชื่อที่ซ้ำกันได้ยาก เช่น packagename

ในตัวอย่างนี้ผมสร้าง MehodChannel เอาไว้แล้วส่ง key ชื่อว่า sayHello เข้าไป

MethodChannel ใน Native

มาที่ native code ในตัวอย่างนี้ผมจะทำใน android คือไฟล์ MainActivity.java
ก็หลักการเดียวกันคือ สร้าง MethodChannel แล้วกำหนด MethodCallHandler

จุดสังเกตคือ onMethodCall มันจะมาที่นี่ เมื่อเราเรียก invodeMethod ที่ Flutter นั่นเอง ส่งที่เราต้องทำคือเช็คค่า method ที่ส่งมาว่าตรงกับใน Flutter หรือไม่

ในตัวอย่างนี้ ผมจะ แค่ log มันออกมา เพื่อดูว่า เราสามารถสั่งให้ทำงานใน native code ได้จริงๆ

ทำหน้า UI

มาลองทำหน้า UI สักหน่อย ที่มีปุ่มๆนึง พอกดแล้วเรียกให้ แสดง toast ใน Native code

ใน native code เช่นใน android จะเป็น java/kotlin ถ้าใครเขียน native มาก่อน ตรงนี้ก็จะสบายล่ะ

การส่งค่ากลับไปที่ Flutter

เราสามารถเรียกให้มาทำงานใน native ได้แล้ว ทีนี้ถ้าทำงานเสร็จอาจต้องส่งค่ากลับไปหา Flutter วิธีการก็ง่ายมาก แค่ใช้ result.success(“something”)

จากนั้นที่ฝั่ง Flutter ก็แค่รับค่าที่ return กลับมา และเนื่องจากมันทำงานแบบ asynchronous method ก็ใส่ await ให้มัน

ลองมาปรับหน้า UI ให้มี Text แสดงค่าที่ return มาจาก Native code

Parameter

มาลองเรียก native code พร้อมกับส่ง parameter ไปด้วย วิธีการก็ง่ายมากคือ แนบเป็น parameter ตัวที่สองของ invokeMethod โดยเขียนในรูปแบบ Map

ที่ฝั่ง native ก็รับค่าด้วย argument แล้วใส่ key แบบนี้

สรุป

การเรียกใช้งาน Native code จาก Flutter และการส่งค่ากลับมายัง Flutter จะใช้ผ่านคลาส MethodChannel ซึ่ง การเขียนในฝั่ง native แน่นอนว่าหากรู้ภาษาของ native นั้นๆ ก็จะช่วยให้สามารถเขียน plugin หรือ method ใน native เพื่อใช้งานร่วมกับ Flutter ได้นั่นเอง

Cr.
https://flutter.dev/docs/development/platform-integration/platform-channels