9 ก.พ. 2021 2 min read Flutter

MethodChannel คืออะไร

วันนี้เจ้าของบทความจะมาแชร์ประสบการณ์นิดหน่อย คือ ที่ทำงานได้มีโจทย์หนึ่งคือ มีแอพ native 1 ตัวแล้ว มีแอพที่ให้ flutter อีก 1 ตัว อยากให้ใช้ Auth Token ตัวเดียวกัน คือ ต้องเอา native ดึง token จาก แอพ ที่ใช้ flutter แต่มันจะส่งข้อมูลหากันยังไงหละ ซึ่งเราก็เคยทำแต่ native -> native ไม่เคย native -> flutter เจ้าของบทความจึงไปค้นหาวิธีที่จะทำให้ส่งข้อมูลหากันได้ จึงไปเจอสิ่งที่เรียกว่า MethodChannel นั่นเอง

MethodChannel for communicating with platform plugins

มันคือการทำให้เราสามารถเขียนโค๊ด Flutter (Dart) ให้สามารถเข้าถึงการใช้ Method ใน Native (Java/Kotlin) ได้นั่นเอง

มาเริ่มจาก Flutter กันก่อน

เจ้าของได้สร้าง Project Flutter มา 1 Project

จากโค๊ด เจ้าของบทความ ได้ override method ที่ชื่อว่า configureFlutterEngine ขึ้นมาแล้วสร้าง instance MedthodChannel ขึ้นมา แล้ว เรียกใช้คำสั่ง setMethodCallHandler จะเป็นตัว callback เมื่อเรียกใช้ method ที่อยู่ใน Channel ถูกเรียกใช้

จากนั้นใน callback เจ้าของบทความได้เช็คเงื่อนไขว่า ถ้า medthod ที่ถูกเรียก คือ saveToken ให้เอา token ที่ได้จาก โค๊ดฝั่ง dart เซฟลง SharedPreference ของ Android นั่นเอง

ต่อไปก็คือ ส่วนที่จะโยน token กลับไปยังแอพ Native ก็ให้ โยน Bundle กับไปยังแอพ Native ได้เลยโดยดูจาก บรรทัดที่ 12-20 ได้เลยครับ

หลังจากนั้น ใน AndroidManifest.xml ให้เพิ่ม เข้าไป เพื่อให้เปิดแอพผ่าน action GET_CONTENT ได้นั่นเอง

จากนั้น ก็มาในส่วนของ Dart Code

จากโค๊ด จะประกาศ instance มา 1 ตัว นั่นคือ MethodChannel('app.channel.shared.data') หลังจากนั้น เมื่อ กดปุ่ม เรียกใช้ invokeMethod เพื่อเรียกใช้ method

invokeMethod รับค่า 2 ตัว

ชื่อ Method ชื่อที่จะให้ MedthodChannel เรียกใช้งาน
Argument เป็นตัวส่งค่าไปยัง Native Code (Java/Kotlin)

เพียงเท่านี้ ค่าจากฝั่ง Dart จะถูกส่งไปยัง Java/Kotlin เพื่อ เก็บค่าเข้าไปใน SharedPreference ครับ

ส่วนของ Android Native App

ส่วนในของ Android Native ไม่มีอะไรที่ซับซ้อนครับ เพียงแค่เรา intent ไปที่แอพที่เป็น Flutter และ ดัก onActivityResult เพื่อรับค่าจาก Flutter App ตามโค๊ดด้านล่างได้เลยครับ

มาทดสอบกันก่อนครับ รัน Flutter App แล้วกด set Preference ให้มีข้อมูลอยู่ใน SharedPreference ก่อนครับ

จากนั้นรัน Android Native App ครับ

เป็นไงกันบ้างครับ เพียงเท่านี้เจ้าของบทความก็สามารถ ดึง Token จาก Flutter App มายัง Android Native App ได้แล้ว วิธีนี้เจ้าของบทความก็ไม่แน่ใจว่าเป็นวิธีที่ดีที่สุดไหม แต่ก็เป็นหนึ่งในทางเลือก เมื่อเราต้องการ เอาข้อมูลบ้างอย่างจากอีกแอพ ที่เป็น Native -> Cross Platform วันนี้ก็ขอจบไปเพียงแค่นี้ก่อนนะครับ ขอให้สนุกกับการเขียนโค๊ดครับ :)