🧱 BLoC Pattern

1. Giới thiệu

BLoC (Business Logic Component) tách biệt business logic khỏi UI:

UI ──Events──▶ BLoC ──States──▶ UI

pubspec.yaml

dependencies:
  flutter_bloc: ^8.1.0

---

2. Các khái niệm cốt lõi

Khái niệm	Mô tả
Event	Input từ UI (user actions)
State	Output cho UI (data to display)
BLoC	Xử lý Events và emit States

---

3. Ví dụ cơ bản - Counter

Định nghĩa Events

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}

Định nghĩa States

class CounterState {
  final int count;
  const CounterState(this.count);
}

Định nghĩa BLoC

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(const CounterState(0)) {
    on<IncrementEvent>((event, emit) {
      emit(CounterState(state.count + 1));
    });

    on<DecrementEvent>((event, emit) {
      emit(CounterState(state.count - 1));
    });
  }
}

---

4. Provide BLoC

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

// Hoặc multiple
MultiBlocProvider(
  providers: [
    BlocProvider(create: (_) => CounterBloc()),
    BlocProvider(create: (_) => AuthBloc()),
  ],
  child: MyApp(),
)

---

5. Consume BLoC

BlocBuilder

BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Text('Count: ${state.count}');
  },
)

context.watch / context.read

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // watch: rebuild khi state thay đổi
        Text('${context.watch<CounterBloc>().state.count}'),

        ElevatedButton(
          // read: gửi event
          onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),
          child: Text('+'),
        ),
      ],
    );
  }
}

---

6. BlocListener - Side Effects

Không rebuild UI, chỉ thực hiện side effects:

BlocListener<AuthBloc, AuthState>(
  listener: (context, state) {
    if (state is AuthSuccess) {
      Navigator.pushReplacementNamed(context, '/home');
    } else if (state is AuthFailure) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.error)),
      );
    }
  },
  child: LoginForm(),
)

---

7. BlocConsumer - Builder + Listener

BlocConsumer<AuthBloc, AuthState>(
  listener: (context, state) {
    // Side effects
    if (state is AuthFailure) {
      ScaffoldMessenger.of(context).showSnackBar(...);
    }
  },
  builder: (context, state) {
    // UI
    if (state is AuthLoading) return CircularProgressIndicator();
    return LoginForm();
  },
)

---

8. Ví dụ thực tế - Todo BLoC

Events

abstract class TodoEvent {}

class LoadTodos extends TodoEvent {}

class AddTodo extends TodoEvent {
  final String title;
  AddTodo(this.title);
}

class ToggleTodo extends TodoEvent {
  final String id;
  ToggleTodo(this.id);
}

class DeleteTodo extends TodoEvent {
  final String id;
  DeleteTodo(this.id);
}

States

abstract class TodoState {}

class TodoInitial extends TodoState {}
class TodoLoading extends TodoState {}
class TodoLoaded extends TodoState {
  final List<Todo> todos;
  TodoLoaded(this.todos);
}
class TodoError extends TodoState {
  final String message;
  TodoError(this.message);
}

BLoC

class TodoBloc extends Bloc<TodoEvent, TodoState> {
  final TodoRepository repository;

  TodoBloc(this.repository) : super(TodoInitial()) {
    on<LoadTodos>(_onLoadTodos);
    on<AddTodo>(_onAddTodo);
    on<ToggleTodo>(_onToggleTodo);
    on<DeleteTodo>(_onDeleteTodo);
  }

  Future<void> _onLoadTodos(LoadTodos event, Emitter<TodoState> emit) async {
    emit(TodoLoading());
    try {
      final todos = await repository.getTodos();
      emit(TodoLoaded(todos));
    } catch (e) {
      emit(TodoError(e.toString()));
    }
  }

  void _onAddTodo(AddTodo event, Emitter<TodoState> emit) {
    if (state is TodoLoaded) {
      final currentTodos = (state as TodoLoaded).todos;
      final newTodo = Todo(id: DateTime.now().toString(), title: event.title);
      emit(TodoLoaded([...currentTodos, newTodo]));
    }
  }

  // ... other handlers
}

UI

class TodoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<TodoBloc, TodoState>(
        builder: (context, state) {
          if (state is TodoLoading) {
            return Center(child: CircularProgressIndicator());
          }
          if (state is TodoError) {
            return Center(child: Text(state.message));
          }
          if (state is TodoLoaded) {
            return ListView.builder(
              itemCount: state.todos.length,
              itemBuilder: (context, index) {
                final todo = state.todos[index];
                return ListTile(
                  title: Text(todo.title),
                  onTap: () => context.read<TodoBloc>().add(ToggleTodo(todo.id)),
                );
              },
            );
          }
          return Container();
        },
      ),
    );
  }
}

---

9. Cubit - Simplified BLoC

Không cần Events, gọi methods trực tiếp:

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

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

// Sử dụng
context.read<CounterCubit>().increment();

---

10. Khi nào dùng BLoC?

Use case	Recommendation
Simple state	setState hoặc Provider
Medium complexity	Cubit hoặc Riverpod
Complex, event-driven	BLoC
Large team, enterprise	BLoC

---

📝 Tóm tắt

Component	Vai trò
Event	User actions
State	UI data
Bloc	Event → State transformation
Cubit	Simplified Bloc
BlocBuilder	Rebuild UI on state change
BlocListener	Side effects
BlocConsumer	Builder + Listener