Flutter BLoC Update 8.x

สวัสดีครับ วันนี้เราจะมาเจาะลึก Flutter BLoC Design Pattern พร้อมอัปเดตเวอร์ชัน 8.0 ที่มีการเปลี่ยนแปลงหลายอย่างที่นักพัฒนาควรรู้ เพื่อให้การใช้งาน BLoC ในโปรเจกต์ Flutter ของคุณเป็นไปอย่างราบรื่นและมีประสิทธิภาพมากยิ่งขึ้น บทความนี้จะครอบคลุมทุกแง่มุมของการอัปเดต ตั้งแต่การติดตั้ง การสร้าง BLoC ไปจนถึงการจัดการข้อมูลและการแสดงผล

การทำ BLoC Design Pattern

การทำ BLoC Design Pattern เป็นแนวทางในการจัดการ State ในแอปพลิเคชัน Flutter ที่ได้รับความนิยมอย่างแพร่หลาย ช่วยให้โค้ดมีความเป็นระเบียบ อ่านง่าย และง่ายต่อการบำรุงรักษา BLoC ย่อมาจาก Business Logic Component ซึ่งทำหน้าที่แยก Logic ของแอปพลิเคชันออกจาก UI ทำให้สามารถทดสอบและนำกลับมาใช้ใหม่ได้ง่ายขึ้น

อัพเดทเวอร์ชั่นใหม่ 8.0

Flutter BLoC เวอร์ชั่น 8.0 ได้มีการเปลี่ยนแปลงหลายอย่างที่สำคัญ โดยเฉพาะการ remove ตัวแบบ Event to Stage ซึ่งหมายความว่าวิธีการเขียนแบบเก่าบางส่วนจะไม่สามารถใช้งานได้อีกต่อไป ดังนั้น การทำความเข้าใจการเปลี่ยนแปลงเหล่านี้จึงเป็นสิ่งจำเป็นสำหรับนักพัฒนาที่ต้องการใช้ BLoC ในเวอร์ชันล่าสุด

การเขียนรูปแบบใหม่

รูปแบบการเขียน BLoC ในเวอร์ชัน 8.0 มีการปรับเปลี่ยนไปจากเดิมเล็กน้อย เพื่อให้การจัดการ State มีความยืดหยุ่นและมีประสิทธิภาพมากขึ้น เราจะมาดูวิธีการเขียนรูปแบบใหม่ที่ถูกต้อง เพื่อให้คุณสามารถปรับตัวเข้ากับการเปลี่ยนแปลงได้อย่างรวดเร็ว

การติดตั้ง Flutter BLoC

เริ่มต้นด้วยการติดตั้ง Flutter BLoC ในโปรเจกต์ของคุณ โดยเพิ่ม dependency ลงในไฟล์ pubspec.yaml

dependencies:
  flutter_bloc: ^8.0.0

จากนั้นรันคำสั่ง flutter pub get เพื่อติดตั้งแพ็กเกจ

การสร้างโฟลเดอร์ model

สร้างโฟลเดอร์ model เพื่อเก็บคลาสที่เกี่ยวข้องกับข้อมูล เช่น Product

การสร้างคลาส Product

สร้างคลาส Product เพื่อเก็บข้อมูลของสินค้า โดยกำหนดตัวแปรต่างๆ เช่น ชื่อสินค้า ราคา และรูปภาพ

การสร้างโฟลเดอร์ blog

สร้างโฟลเดอร์ blog เพื่อเก็บคลาส BLoC ของคุณ

การสร้างคลาสแม่ (My Event, My State)

สร้างคลาสแม่ MyEvent และ MyState เพื่อเป็นคลาสพื้นฐานสำหรับ Event และ State ของ BLoC

การสร้างคลาส State (Initial, Loading, Error)

สร้างคลาส State ที่แตกต่างกัน เช่น Initial, Loading, และ Error เพื่อแสดงสถานะต่างๆ ของการดึงข้อมูล

การสร้างคลาส ProductBloc

สร้างคลาส ProductBloc ที่ขยายมาจาก Bloc เพื่อจัดการ Business Logic ของการดึงข้อมูลสินค้า

การสร้าง Event (GetProductEvent)

สร้าง Event GetProductEvent เพื่อเรียกให้ ProductBloc ดึงข้อมูลสินค้า

การสร้าง State (GetProductStateSuccess)

สร้าง State GetProductStateSuccess เพื่อแสดงข้อมูลสินค้าที่ดึงมาสำเร็จ

การแปลง JSON เป็น Object

แปลงข้อมูล JSON ที่ได้รับจาก API เป็น Object ของคลาส Product

การสร้าง method onGetProduct

สร้าง method onGetProduct ใน ProductBloc เพื่อดึงข้อมูลสินค้าจาก API

การปล่อย State (emit)

ใช้ method emit เพื่อปล่อย State ต่างๆ เช่น Loading, Success, และ Error

การใช้ http package

ใช้ http package เพื่อดึงข้อมูลจาก API

การเช็ค status code

ตรวจสอบ status code ของการตอบสนองจาก API เพื่อตรวจสอบความสำเร็จหรือความล้มเหลว

การแปลง Body เป็น List

แปลง Body ของการตอบสนองจาก API เป็น List ของ Object Product

การปล่อย State Success

เมื่อดึงข้อมูลสำเร็จ ให้ปล่อย State GetProductStateSuccess พร้อมข้อมูลสินค้า

การแสดงผลในหน้า ProductListScreen

สร้างหน้า ProductListScreen เพื่อแสดงรายการสินค้า

การใช้ BlocProvider

ใช้ BlocProvider เพื่อจัดเตรียม ProductBloc ให้กับหน้า ProductListScreen

การใช้ BlocConsumer

ใช้ BlocConsumer เพื่อรับฟัง State ของ ProductBloc และแสดงผลตาม State ที่ได้รับ

การเรียก Event (GetProductEvent)

เรียก Event GetProductEvent เมื่อหน้า ProductListScreen ถูกสร้างขึ้น

การแสดงผล Product Name

แสดงชื่อสินค้าในหน้า ProductListScreen

การใช้ ListTile

ใช้ ListTile เพื่อแสดงข้อมูลสินค้าในรูปแบบรายการ

การแสดงผล Title, Subtitle, Leading

แสดง Title, Subtitle, และ Leading ใน ListTile เพื่อแสดงข้อมูลสินค้า

การ remove ตัวแบบ Event to Stage

การเปลี่ยนแปลงที่สำคัญที่สุดในเวอร์ชัน 8.0 คือการ remove ตัวแบบ Event to Stage ซึ่งหมายความว่าวิธีการจัดการ Event และ State แบบเก่าจะไม่สามารถใช้งานได้อีกต่อไป นักพัฒนาจำเป็นต้องปรับเปลี่ยนวิธีการเขียนโค้ดให้สอดคล้องกับรูปแบบใหม่

การใช้ stream กับไซอิ๋ว

การใช้ stream กับไซอิ๋วเป็นรูปแบบการจัดการ State แบบเก่าที่ไม่แนะนำให้ใช้ในเวอร์ชัน 8.0

การใช้ Command

การใช้ Command เป็นแนวทางในการจัดการ Logic ที่สามารถนำมาประยุกต์ใช้ใน BLoC ได้

Extract V7

การ Extract V7 เป็นเครื่องมือที่ช่วยในการสร้าง Widget จากโค้ดเดิม

การติดตั้ง Extension

การติดตั้ง Extension เป็นการเพิ่มความสามารถให้กับ IDE เพื่อช่วยในการเขียนโค้ด

การพิมพ์ pur

การพิมพ์ pur เป็นการใช้คำแนะนำจาก Flutter เพื่อให้โค้ดมีประสิทธิภาพมากยิ่งขึ้น

การใส่คอนสแตนท์

การใส่คอนสแตนท์เป็นการปรับปรุงประสิทธิภาพของโค้ด

การใช้ Command จุด

การใช้ Command จุด เป็นการใช้คำสั่งลัดเพื่อเข้าถึงฟังก์ชันต่างๆ ใน IDE

การเขียน slash สองที

การเขียน slash สองทีเป็นการคอมเมนต์โค้ด

การคอมเม้นหน่อย

การคอมเมนต์โค้ดเป็นการอธิบายการทำงานของโค้ด

การเขียนอีกหน่อ

การเขียนอีกหน่อเป็นการสร้าง Widget ใหม่

การใช้แอพ Socialcam

การใช้แอพ Socialcam เป็นตัวอย่างของการนำ BLoC ไปประยุกต์ใช้

การทำแอปที่ with รายการสินค้า

การทำแอปที่ with รายการสินค้าเป็นตัวอย่างของการนำ BLoC ไปประยุกต์ใช้

การ Extract V7

การ Extract V7 เป็นเครื่องมือที่ช่วยในการสร้าง Widget จากโค้ดเดิม

การตั้งชื่อไฟล์

การตั้งชื่อไฟล์เป็นสิ่งสำคัญในการจัดการโค้ด

Naming convention

Naming convention เป็นแนวทางในการตั้งชื่อตัวแปรและคลาส

Import materials

Import materials เป็นการนำเข้าแพ็กเกจที่จำเป็น

การย้ายไฟล์

การย้ายไฟล์เป็นการจัดระเบียบโค้ด

การ Import ในปารีส

การ Import ในปารีสเป็นการนำเข้าแพ็กเกจที่จำเป็น

การเตรียมเนื่องของเบต้า

การเตรียมเนื่องของเบต้าเป็นการเตรียมพร้อมสำหรับการทดสอบ

การติดตั้งตัว Factor บล็อก

การติดตั้งตัว Factor บล็อกเป็นการเพิ่มความสามารถให้กับ BLoC

การเปิดขับสเปคบัตรยา

การเปิดขับสเปคบัตรยาเป็นการตรวจสอบข้อมูล

การสร้างโฟลเดอร์ model

สร้างโฟลเดอร์ model เพื่อเก็บคลาสที่เกี่ยวข้องกับข้อมูล

การสร้างคลาส Product

สร้างคลาส Product เพื่อเก็บข้อมูลของสินค้า

การสร้างคลาสแม่

สร้างคลาสแม่ MyEvent และ MyState เพื่อเป็นคลาสพื้นฐาน

การสร้างคลาส State

สร้างคลาส State ที่แตกต่างกัน

การสร้างคลาส ProductBloc

สร้างคลาส ProductBloc เพื่อจัดการ Business Logic

การสร้าง Event

สร้าง Event เพื่อเรียกให้ ProductBloc ทำงาน

การสร้าง State

สร้าง State เพื่อแสดงสถานะต่างๆ

การแปลง JSON

แปลงข้อมูล JSON เป็น Object

การสร้าง method

สร้าง method เพื่อดึงข้อมูล

การปล่อย State

ใช้ method emit เพื่อปล่อย State

การใช้ http

ใช้ http package เพื่อดึงข้อมูล

การเช็ค status code

ตรวจสอบ status code

การแปลง Body

แปลง Body เป็น List

การปล่อย State

เมื่อดึงข้อมูลสำเร็จ ให้ปล่อย State

การแสดงผล

แสดงผลข้อมูลสินค้า

การใช้ BlocProvider

ใช้ BlocProvider เพื่อจัดเตรียม ProductBloc

การใช้ BlocConsumer

ใช้ BlocConsumer เพื่อรับฟัง State

การเรียก Event

เรียก Event เมื่อหน้าถูกสร้าง

การแสดงผล

แสดงผลข้อมูลสินค้า

การใช้ ListTile

ใช้ ListTile เพื่อแสดงข้อมูล

การแสดงผล

แสดง Title, Subtitle, และ Leading

สรุปและข้อควรจำ

Flutter BLoC Update 8.x มาพร้อมกับการเปลี่ยนแปลงที่สำคัญหลายประการ โดยเฉพาะการ remove ตัวแบบ Event to Stage นักพัฒนาควรทำความเข้าใจการเปลี่ยนแปลงเหล่านี้และปรับเปลี่ยนวิธีการเขียนโค้ดให้สอดคล้องกับรูปแบบใหม่ เพื่อให้การใช้งาน BLoC เป็นไปอย่างราบรื่นและมีประสิทธิภาพ

สรุปการเปลี่ยนแปลงหลัก

• การ remove ตัวแบบ Event to Stage
• การปรับปรุงการจัดการ State
• การเปลี่ยนแปลงวิธีการเขียนโค้ด

ข้อควรระวังในการใช้งาน

• ศึกษาเอกสารประกอบและตัวอย่างโค้ด
• ทดสอบโค้ดอย่างละเอียด
• ทำความเข้าใจการเปลี่ยนแปลงในแต่ละเวอร์ชัน

การอ้างอิงถึงเอกสารประกอบ

สำหรับข้อมูลเพิ่มเติมและรายละเอียดเกี่ยวกับการใช้งาน Flutter BLoC Update 8.x คุณสามารถศึกษาได้จากเอกสารประกอบอย่างเป็นทางการของ Flutter BLoC

💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์

👉 แอดไลน์เพื่อปรึกษาฟรี

หรือสแกน QR เพื่อแอด