🔖 หมวดบทเรียน: การจัดการสถานะแบบ 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
Feature | BLoC | Cubit |
---|---|---|
ต้องใช้ event แยกต่างหาก | ✅ | ❌ |
เหมาะกับ logic ที่ซับซ้อน | ✅ | ✅ (ระดับเบา) |
ใช้งานง่าย | ❌ | ✅ |
✅ สรุป
flutter_bloc
ช่วยแยก logic ออกจาก UI ได้ชัดเจนCubit
เหมาะกับ logic ง่าย ๆ แบบ counter, toggle ฯลฯ- BLoC เหมาะกับระบบที่มี state และ event ซับซ้อน เช่น auth, form, cart
บทถัดไป เราจะเรียนรู้การจัดการ Route และ Navigation ขั้นสูงด้วย Navigator 2.0 และ GoRouter