Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 3: การจัดการ State ด้วย BLoC (Business Logic Component)

🔖 หมวดบทเรียน: การจัดการสถานะแบบ Event-driven

📌 เหมาะสำหรับ: ผู้ที่ต้องการโครงสร้างแอปที่แยก Business Logic ออกจาก UI อย่างชัดเจน

🎯 เป้าหมาย: เรียนรู้การใช้งาน BLoC และ Cubit เพื่อนำไปใช้ในแอปที่ซับซ้อน

🧭 เกริ่นนำ

BLoC (Business Logic Component) เป็นรูปแบบการจัดการสถานะที่อิงกับ event และ stream ซึ่งช่วยให้สามารถแยกหน้าที่ของ UI กับ logic ได้ชัดเจน โดย Flutter มี package อย่าง flutter_bloc ที่ช่วยให้การจัดการสถานะแบบ reactive ง่ายขึ้น และยังมี Cubit สำหรับสถานะง่าย ๆ ที่ไม่ต้องการ event หลายชนิด

🧰 การติดตั้ง flutter_bloc

เพิ่มใน pubspec.yaml:

dependencies:
  flutter_bloc: ^8.1.3

แล้วรัน:

flutter pub get

🔧 การใช้ Cubit (ตัวอย่าง Counter)

สร้าง Cubit class

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

ใช้ในแอป

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(BlocProvider(
    create: (_) => CounterCubit(),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterPage());
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Cubit Counter")),
      body: Center(
        child: BlocBuilder<CounterCubit, int>(
          builder: (context, count) => Text('จำนวน: \$count', style: TextStyle(fontSize: 30)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterCubit>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

✅ BLoC vs Cubit

FeatureBLoCCubit
ต้องใช้ event แยกต่างหาก
เหมาะกับ logic ที่ซับซ้อน✅ (ระดับเบา)
ใช้งานง่าย

✅ สรุป

  • flutter_bloc ช่วยแยก logic ออกจาก UI ได้ชัดเจน
  • Cubit เหมาะกับ logic ง่าย ๆ แบบ counter, toggle ฯลฯ
  • BLoC เหมาะกับระบบที่มี state และ event ซับซ้อน เช่น auth, form, cart

บทถัดไป เราจะเรียนรู้การจัดการ Route และ Navigation ขั้นสูงด้วย Navigator 2.0 และ GoRouter