Học Flutter cơ bản - Triển khai BLoC trong Flutter

Flutter là một framework phát triển ứng dụng di động mạnh mẽ và phổ biến nhờ hiệu suất cao và khả năng tùy chỉnh giao diện linh hoạt. Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai BLoC (Business Logic Component) trong Flutter, một kiến trúc quan trọng giúp tổ chức và quản lý trạng thái ứng dụng hiệu quả.

---

1. BLoC trong Flutter là gì?

BLoC là một trong những mô hình quản lý trạng thái phổ biến nhất trong Flutter. BLoC giúp:

• Tách biệt logic và giao diện: Bảo đảm phần giao diện (UI) không bị ràng buộc với logic kinh doanh.
• Tái sử dụng code dễ dàng hơn: Logic có thể được sử dụng lại trên nhiều widget.
• Đơn giản hóa kiểm thử: Giảm độ phức tạp khi viết unit test hoặc kiểm thử giao diện.

Nguyên tắc hoạt động của BLoC

BLoC hoạt động dựa trên Streams để truyền dữ liệu. Nó bao gồm hai thành phần chính:

1. Inputs: Các sự kiện (Event) được gửi vào BLoC.
2. Outputs: Các trạng thái (State) được phát từ BLoC và cập nhật giao diện.

---

2. Lợi ích của việc sử dụng BLoC

• Quản lý trạng thái dễ dàng: Duy trì trạng thái đồng nhất cho toàn bộ ứng dụng.
• Mở rộng quy mô ứng dụng: Phù hợp khi ứng dụng phát triển lớn hơn.
• Phân tách trách nhiệm rõ ràng: Giao diện, logic, và dữ liệu được xử lý riêng biệt.

---

3. Cách triển khai BLoC trong Flutter

Hãy bắt đầu với một ví dụ minh họa.

Bước 1: Cài đặt package BLoC

Cài đặt flutter_bloc - thư viện hỗ trợ BLoC:

flutter pub add flutter_bloc

Bước 2: Tạo Event và State

Tạo file counter_event.dart:

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

Tạo file counter_state.dart:

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

Bước 3: Xây dựng BLoC

Tạo file counter_bloc.dart:

import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

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

Bước 4: Tích hợp vào ứng dụng

Sử dụng BlocProvider và BlocBuilder trong giao diện:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Học Flutter cơ bản với BLoC')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              'Giá trị hiện tại: ${state.count}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => counterBloc.add(IncrementEvent()),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => counterBloc.add(DecrementEvent()),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

---

4. Kết quả

Sau khi chạy ứng dụng, bạn sẽ thấy:

• Nút "+": Tăng giá trị bộ đếm.
• Nút "-": Giảm giá trị bộ đếm.
• Dữ liệu được đồng bộ hóa: Trạng thái được quản lý hiệu quả nhờ BLoC.

---

5. Kết luận

BLoC là một giải pháp mạnh mẽ để quản lý trạng thái trong các ứng dụng Flutter. Với kiến trúc rõ ràng, khả năng tái sử dụng logic cao và hỗ trợ kiểm thử dễ dàng, BLoC phù hợp cho cả dự án nhỏ lẫn lớn.