hand tlhand crfog b
17Dec, 2020
Language blog :
Thai
Share blog : 
17 December, 2020
Thai

เหตุผลที่ควรใช้ Provider ใน Flutter

By

5 mins read
เหตุผลที่ควรใช้ Provider ใน Flutter

สำหรับใครที่กำลังต้องการพัฒนาแอปพลิเคชันมือถือด้วย Flutter ไม่ควรพลาดบทความนี้ เพราะจะพาไปรู้จักกับ pub ที่เป็นที่แนะนำและนิยมมาก ๆ ในกลุ่มของ Flutter developer อีกทั้งยังเป็น pub ที่ได้ Favorite จาก Flutter official อีกด้วย ซึ่งก็คือ Provider นั่นเอง

หลาย ๆ คนอาจจะยังไม่รู้จัก Provider ว่าทำหน้าที่อะไร ทำไมคนถึงนิยมใช้กันอย่างมากมาย หากมีโอกาสได้รู้จักกับ Provider แล้วนั้น จะทำให้ชีวิตมีความสุข ไม่หงุดหงิด และยังทำให้ App Logical ของเราดีขึ้นมากอีกด้วย 

การ Passing Arguments to Widget แบบเดิม ๆ

ในการส่งข้อมูลระหว่าง widget รูปแบบแรก ๆ ที่ Flutter developer จะทำกัน คือ การส่งผ่าน arguement เพื่อให้ตัว class ที่เป็น child widget ทำการ construct ด้วย arguement ที่ส่งผ่านนั้น ๆ แต่ถ้าหากเราอยากส่งข้อมูลจาก parent widget ส่งไปหา child widget ในลำดับที่ 4 เราจะทำอย่างไงกันได้บ้าง ?

Passing Arguments to Widget

จากการส่งผ่านข้อมูลดังกล่าวอาจทำให้เกิดปัญหา ดังต่อไปนี้

1. Apropcalypse

โดยปกติแอปพลิเคชันที่สำเร็จแล้วจะมีการ communicate ระหว่าง widget ซึ่งไม่ใช่แค่ 4 - 5 widgets แต่อาจจะมีถึง 100 widgets ที่มีความสัมพันธ์ที่ซับซ้อน ทำให้การส่งผ่านข้อมูลแบบนี้ไม่น่าเป็นที่เหมาะสมเท่าไหร่นัก

2. Multiple communication level

หากเราส่ง widget จาก level 1 ไปหา level 4 โดยข้อมูลที่ส่งผ่าน level 2 และ 3 ไม่ได้ถูกนำไปใช้ หรือพูดง่าย ๆ คือ widget ที่ level 2 และ level 3 ทำหน้าที่เป็นแค่สะพานเชื่อมเพื่อให้ level 1 ส่งไปหา level 4 เท่านั้น ซึ่งสิ่งนี้เป็นสิ่งที่ไม่ควรจะเกิดขึ้นในการพัฒนาแอปพลิเคชันที่ดี

3. นำ InheritedWidget มาช่วย

InheritedWidget เกิดมาเพื่อแก้ปัญหาการส่งผ่านข้อมูลให้ลูก ๆ หลาน ๆ แบบไม่ต้องส่งต่อกันไปเรื่อย ๆ ถ้าหากใครเคยใช้ React ก็จะเหมือนกับ React Context แต่ถ้าหากเคยใช้ Vue ก็จะเหมือน Provider หรือ Inject ซึ่ง InheritedWidget ก็สามารถทำงานได้ไม่ต่างกับตัวที่เปรียบเทียบไปข้างต้น แต่ถ้าข้อมูลที่เราส่งผ่านนั้นเป็นข้อมูลที่มีการอัปเดต หรือ reactive ล่ะ ? ตัว InheritedWidget จะทำให้ widget ลูก ๆ ที่ใช้งานค่านั้นอยู่ rebuild หรือไม่ 

คำตอบคือ ได้ ถ้าหากนำ widgetStatful มาครอบไว้ข้างบน ซึ่งนำ state มาสร้าง instance  ของ InheritedWidget แต่ข้อเสียคือ มันจะ update ทั้ง widget tree นั่นเอง ซึ่งหากเป็นแอปพลิเคชันที่เล็ก ๆ อาจจะทำได้ไม่มีปัญหาอะไร แต่ถ้าหากแอปพลิเคชันใหญ่นั้นจะกลายเป็นปัญหาใหญ่ทันที 

แล้วคนอื่นเขาแก้ปัญหานี้กันอย่างไร ?

หากใครที่มาจากสาย Web developer คงจะรู้จัก state management หลาย ๆ ตัวอยู่แล้ว เช่น Redux,  MobX, Recoild, Vuex เป็นต้น ซึ่งขั้นตอนในการทำงานอาจจะไม่เหมือนกันมากนัก แต่ผลลัพธ์ที่ได้จะเหมือนกับ Provider ทุกประการ นั่นก็คือ เมื่อ state ที่อยู่ใน store เปลี่ยน จะทำให้ state นั้นที่ถูกอัปเดต อยู่ใน widgets ไหน widget นั้นจะต้อง rebuild เพื่อให้ได้หน้า UI ใหม่ตาม state ที่เปลี่ยนด้วย

วิธีแก้ปัญหาด้วย Provider

จากที่กล่าวข้างต้น เราจะพาไปรู้จัก Redux ในโลกของ Flutter หรือที่เรียกว่า Provider ซึ่งสิ่งที่ต้องรู้จักในการทำ Provider จะมีดังต่อไปนี้

1. Provider

คือ เราจะทำการส่ง Data เข้าไปในขั้นนี้ โดยที่มันจะไป wrapped อยู่เหนือ widgets ที่เราจะเรียกใช้ข้อมูลชุดนั้น 

Provider

2. Listener

คือ เป็นการเรียกใช้ข้อมูลของ provider ที่อยู่เหนือตัวเอง เมื่อมีการ update ข้อมูลชุดนั้น คนที่เรียก Listener นี้จะทำการ rebuild

Listener

3. ChangeNotifierModel

คือ เป็น class ข้อมูลที่รับคุณสมบัติมาจาก ChangeNotifier ซึ่งมี method ที่สามารถส่งการแจ้งเตือนไปหา widget ที่ทำการ subscribe ว่า state ได้ถูกการ update แล้วช่วย rebuild ใหม่ด้วยนั่นก็คือ NotifyListeners() 

ChangeNotifierModel

จากโค้ดข้างต้นจะเห็นว่า จะมีชุดข้อมูลหนึ่งที่ชื่อว่า ExampleData ที่เป็นคลาสข้อมูล สามารถเปลี่ยนแปลงทีหลังได้ ( ไม่ได้ใส่ final ) หากลองสังเกต จะเห็นว่า class นั้นมีการ mix ด้วย mixin ( with ) ที่ชื่อว่า ChangeNotifier และมีการเรียก method ที่ชื่อว่า notifyListeners เมื่อทำการ update ข้อมูลเรียบร้อยเพื่อเป็นการบอกให้ Listener ทุกตัวที่ Listening อยู่ทำการ rebuild ด้วย ข้อมูลชุดใหม่ 

ถัดมาในส่วนสุดท้ายจะเป็น Consumer ส่วนนี้จะเป็นส่วนที่เรียกอีกอย่างว่า Listener โดยที่มันจะ rebuild แค่สิ่งที่อยู่ใน Widget ที่ชื่อ Consumer เท่านั้น หากมี widget อื่นที่อยู่นอกเหนือจาก Consumer จะไม่มีการ rebuild ใด ๆ เกิดขึ้น ซึ่งนี่ถือเป็น ข้อดีมาก ๆ ในการทำเรื่อง performace 

สำหรับบทความหน้าจะเป็นการใช้ Provider แบบ Nested ที่มีชุดข้อมูลหลายข้อมูล และจะทำยังไงให้ ชุดข้อมูลกลาง หรือ Provider Class เป็น Central และ reuseable ที่สุด ไว้เจอกันใหม่ครับ 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

10
October, 2024
JS class syntax
10 October, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
10
October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
10 October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
10
October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
10 October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.