BLoC Flutter

BLoC Flutter

BLoC Flutter คืออะไร? ช่วยให้ State Management ทำงานได้ดีขึ้นได้ยังไง?

Share this?

Key Highlights:

  • Bloc ตัวกลางระหว่าง Widget (UI) และ Data โดย Bloc จะจัดการ Event และส่ง State ที่ Widget ต้องไปตรงๆเลย ซึ่งช่วยลดขั้นตอนการส่ง State ลดลง
  • Widget ของ Bloc ได้แก่ BlocProvider ตัวจัดการว่า Widget จะเข้าถึง State ของ Bloc ตัวไหนบ้าง, BlocBuilder ตัวสร้าง WIdget ของ Bloc ซึ่งทำให้เกิดการเข้าถึง State ของ Bloc, BlocListener ตัวฟังเพื่อให้ทำงานได้ถูกต้องตาามเงื่อนไข, BlocConsumer จะคอยดูเงื่อนไขและ Rebuild Widget และ RepositoryProvider ตัวกลางการติดต่อระหว่าง Data Provider

ก่อนอื่นที่จะมารู้จักกับ Bloc ใน Flutter นั้นเราต้องมาทำความรู้จักกับ State Management  กันก่อน มาเริ่มกันเลย

State Mangement ของ Flutter แบ่งออกเป็น 2 ประเภทก็คือ

Ephemeral State หรือจะเรียกอีกชื่อนึงว่า Local State โดย State ตัวนี้นั้นจะถูกเรียกใช้งานอยู่ใน Widget ใด Widget นึงเท่านั้นเดี๋ยวๆโดดไม่ยุ่งกะใคร

App State ตัวนี้ก็เหมือนขั่วตรงข้ามกับ Ephemeral State ซึ่งนั้นหมายความว่าเป็น State ต่างๆที่จะถูกเรียกใช้ในหลายๆ Widget นั้นเองตามภาพด้านล่าง

อ้าววววววว ก็ในเมื่อ Flutter ก็มี State Manage ให้ใช้อยู่แล้วเราจะไปใช้ของคนอื่นทำไมล่ะ? ใช่ครับมันมีแต่หลักการของการเปลี่ยน State ของตัว Flutter เองนั้นใช้วิธีที่เรียกว่า Lifting State Up แล้วไอที่ว่ามันคืออะไรล่ะ โอเคมาดูรูปภาพด้านล้างกันดีกว่า

สมมติผมสร้าง Application ที่มี Function ในการนำสินค้าลงตะกร้า โดยที่ตะกร้าสินค้าทั้งหมดนั้นจะอยู่คนละหน้ากับหน้าสินค้า โดยที่เมื่อผมทำการกดนำสินค้าลงตะกร้านั้นจะต้องทำการนำ State ของสินค้าตัวนั้นขึ้นไปตัวแม่ของมันเพื่อส่งไปให้ My App แล้วให้ My App ส่ง State ไปให้ตัวของตะกร้าสินค้าอีกที เห็นมั้ยล่ะครับว่าถ้ายิ่ง State ที่เราต้องการใช้อยู่ลึกขนาดไหน เราก็ต้องขึ้นมาเป็นทอดๆให้ตัวด้านบนนำไปให้หน้าที่เราต้องการใช้ มันจึงเกิดความยุ่งยากขึ้น มากมาย ด้วยสาเหตุนี้เราจึงไม่ควรใช้ State Management ของ Flutter เอง 
Third Party ต่างๆก็ทราบถึงขอนี้จึงได้ทำการสร้าง State Management อื่นๆขึ้นมามากมาย ไม่ว่าจะเป็น Provider, Bloc, Mobx ฯลฯ 
โอเคที่นี้เรามาเข้าเรื่องของเราดีกว่า นั้นก็คือ Bloc นั้นเอง

What’s Bloc ?

Bloc คืออะไร Bloc คือตัวช่วยที่ทำให้เราทำ State Mangement ได้ง่ายมากขึ้นนั้นเอง โดยจากรูปทำให้เราเห็นว่า Bloc นั้นจะทำหน้าที่เป็นตัวกลางระหว่าง Widget (หรือในรูปก็คือ UI) และ ข้อมูลต่างๆนั้นเอง โดยที่ Widget นั้นทำหน้าที่ส่ง Event ไปให้ Bloc เมื่อ Bloc รับทราบถึง Event แล้วว่า Widget ต้องการทำ Event ไหนก็ทำการจัดการและส่ง State ที่ Widget ต้องไปตรงๆได้เลย เป็นไงแค่นี้ก็ดูง่ายแล้วใช่ไหมละ เรามาดูกันดีกว่าว่าแล้วไอเจ้า Bloc เนี่ยมันใช้งานยังไง โดยเริ่มจาก Widget ต่างๆของ Bloc กันดีกว่า

BlocProvider​

หน้าที่ของมันก็คือการที่บอกว่า Widget ต่อไปนี้จะเข้าถึง State ของ Bloc ตัวไหนได้บ้าง

โดยจากตัวอย่างด้านบนนั้นเป็นประกาศว่า ChildA นั้นจะเข้าถึงของ State ที่อยู่ใน BlocA ได้นั้นเองอ้าวแล้วถ้าในหนึ่ง Widget เราอย่างเข้าถึง Bloc หลายๆตัวละทำไง เราจึงขอเสนออออออออ MultiBlocProvider หน้าที่เหมือนกันแต่ใส่ Bloc หลายๆตัวนั้นเองงง

มาเริ่มกันด้วยตัวที่สำคัญอันดับต้นๆนั้นก็คือ

BlocBuilder

นั้นก็คือตัวที่สร้าง Widget  ของ Bloc นั่นเองและนี่คือการเข้า ถึง State ของ Bloc นั่นเองโดยที่เราสามารส่งค่าของ State เข้าไปใน  Widget ที่อยู่ภายใต้ BlocBuilder นี้เอง โดยหากเกิดการเปลี่ยนแปลงของ State BlocBuilder จะทำการสร้าง Widget ตัวนั้นใหม่นั้นเอง

นอกจากนี้ยังมีการที่เราสามารถกำหนดได้ว่าจะให้ Rebuild Widget เมื่อไรด้วยการใส่ BuildWhen ลงไปเพื่อเปรียบเทียบ Previous State และ Current State

BlocListener

นั้นใช้ในการฟัง State ต่างๆ เพื่อถูกต้องตามเงื่อนไขที่เราเขียนเอาไว้อาจทำการ

Navigate User ไปหน้าใหม่ Show Dialog หรือ Snack Bar ขึ้นมานั้นเอง

 

 

เราสามารถใส่ ListenWhen เพื่อเปรียบเทียบ PreviousState และ Current State เพื่อเป็นการ Optimization

แล้วเราอยากเปรียบเทียบ State จาก Bloc อื่นๆด้วยละทางเราขอเสนอออออ 

 

อ้าววแล้ว ถ้าเราทั้งอย่าง Listen State และ Build Widget ด้วยละ เอ้าาาก็ใช้ BlocListner กับ BlocBuilder คู่กันสิ ไม่ ไม่ ไม่ ไม่ เราขอเสนอ

 

 

BlocConsumer

การผสมผสานอย่างลงตัวระหว่าง BlocBuilder และ BlocListner โดยจะทำงานดูเงื่อนไขของ State ที่เราเขียไว้ก่อนและ Rebuild Widget ตัวนั้นๆเอง

มาถึงตัวสุดท้าย

RepositoryProvider

จะเป็นตัวทีครอบ BlocProvider อีกที โดยจะเป็นตัวกลางการติดต่อระหว่าง Data Provider (Class ที่ติดต่อกับ Db หรือ Api) เพื่อให้ถูกต้องตามหลัก Clean Architecture เราจึงควรแยกส่วนการทำงานอย่างชัดเจน (บทความเกี่ยวกับ Clean Architeher คลิ๊กที่นี้) และ Bloc ต่างๆภายใต้ ReposityProider นั้นจะจะสามารถเข้าถึง Data Provider ที่กำหนดได้นั้นเอง

ถ้าอยากใช้กับ Repository หลายๆตัวละ ฉะนั้นขอเสนอ พอๆๆๆ เลิกเล่นได้แล้วเข้าเรื่องๆ นั้นก็คือ MultiRepositoryProvider

ก็จบไปแล้วนะครับสำหรัวเรื่อง Bloc  ถ้าอย่างทราบข้อมูลเพิ่มเติมเพื่อประกอบการตัดสินใจก็เข้าไปดูได้ที่หน้า Website หลักของ Bloc คลิ๊กที่นี้ๆๆๆ ถ้าให้ข้อมูลผิดพลาดประการก็อภัยไว้นะที่นี้ด้วย แนะนำติชม ได้เต็มที่เลย ด่าได้  แต่อย่าด่าแรง เดี๋ยวร้องไห้

Share this?

More from this Author?

Get in Touch

Get in Touch

Sign up to our newsletter

Sign up to our newsletter

Thank You for reaching out to us!

Thank You
for reaching out to us!

We’ll get back to you as soon as we can.

Thank You for signing up to our newsletter!

Thank You for signing up
to our newsletter!

We’ll serve you with amazing stories.