BloC Flutter: Hướng dẫn chi tiết cách sử dụng BloC trong Flutter

Bài viết “BloC Flutter” sau đây giới thiệu mô hình quản lý trạng thái BloC (Business Logic Component) trong cộng đồng Flutter. Bài viết giải thích khái niệm BloC, cách tách biệt logic nghiệp vụ khỏi giao diện người dùng và tầm quan trọng của điều này trong phát triển ứng dụng. Đồng thời, nêu rõ lợi ích của BloC và so sánh với các mô hình khác như Provider, Redux và Riverpod, chỉ ra ưu nhược điểm của từng mô hình để giúp bạn chọn giải pháp phù hợp.

Đọc bài viết này để hiểu thêm về:

• Các khái niệm cơ bản trong BloC Flutter
• Cách sử dụng BloC 
• Ví dụ sử dụng BloC trong thực tế
• Thực hành nâng cao với BloC 

Khái niệm cơ bản cần biết khi tìm hiểu về BloC Flutter

BloC Flutter là gì?

Định nghĩa: BloC (Business Logic Component) là một giải pháp quản lý trạng thái giúp tách biệt logic nghiệp vụ khỏi mã giao diện người dùng (UI) trong ứng dụng Flutter. BloC khuyến khích cách tiếp cận phản ứng, giúp mã của bạn dễ bảo trì và mở rộng hơn.

BloC là viết tắt của Business Logic Component. Đây là một mẫu thiết kế do Google tạo ra để tách biệt logic nghiệp vụ khỏi UI trong ứng dụng Flutter, sử dụng streams để quản lý luồng dữ liệu và sự kiện.

Vai trò:

• Xử lý logic nghiệp vụ: BloC thực hiện các phép tính, gọi API, hoặc thực hiện các tác vụ khác để cập nhật state.
• Quản lý luồng dữ liệu: BloC điều phối luồng dữ liệu giữa giao diện người dùng và các lớp khác trong ứng dụng.
• Tách biệt mối quan tâm: BloC giúp tách biệt logic nghiệp vụ khỏi giao diện người dùng, làm cho code trở nên rõ ràng và dễ bảo trì hơn.

Ví dụ:

• Ứng dụng danh sách việc làm: BloC sẽ xử lý các event như thêm việc làm mới, xóa việc làm, cập nhật trạng thái hoàn thành của việc làm.
• Ứng dụng đăng nhập: BloC sẽ xử lý các event như đăng nhập, đăng xuất, lấy thông tin người dùng.

Các thành phần trong BloC bao gồm như Event (sự kiên), State (trạng thái), Stream (Dòng dữ  liệu), các thành phần này hoạt động kết hợp với nhau cho ta khái niệm cơ bản về BloC để tìm hiểu kỹ hơn các thành phần trong BloC.

Khái niệm Event trong BloC Flutter

Event trong kiến trúc BloC là một đối tượng đơn giản mô tả một hành động hoặc sự kiện mà người dùng hoặc hệ thống kích hoạt. Nó đóng vai trò là một thông điệp gửi đến BloC để yêu cầu thực hiện một hành động cụ thể.

Tính chất và vai trò của Event:

• Đơn giản: Event thường được định nghĩa là một class hoặc enum với các trường dữ liệu cần thiết để mô tả sự kiện.
• Không chứa logic: Event chỉ chứa thông tin về sự kiện, không chứa bất kỳ logic xử lý nào.
• Cầu nối: Event đóng vai trò là cầu nối giữa giao diện người dùng (UI) và logic nghiệp vụ (BloC). Khi người dùng thực hiện một hành động trên giao diện (ví dụ: nhấn nút, nhập liệu), một event tương ứng sẽ được tạo ra và gửi đến BloC.
• Kích hoạt state: Khi BloC nhận được một event, nó sẽ thực hiện các xử lý cần thiết và phát ra một state mới để cập nhật giao diện.

Ví dụ: Giả sử chúng ta có một ứng dụng đơn giản để đếm số lần nhấn nút. Ta có thể định nghĩa các event như sau:

Dart

class IncrementEvent extends Counter Event {}
class DecrementEvent extends Counter Event {}

IncrementEvent và DecrementEvent đại diện cho hai hành động: tăng và giảm số đếm.

Sơ đồ hoạt động:

flowchart LR
    A(UI) --> B(Event)
    B --> C(Bloc)

Giải thích:

• Người dùng tương tác với giao diện (UI), tạo ra một event (ví dụ: nhấn nút “Tăng”).
• Event được gửi đến BloC.
• BloC nhận được event và thực hiện các xử lý tương ứng.

Tại sao cần Event?

• Tách biệt mối quan tâm: Tách biệt việc mô tả một hành động (event) với việc xử lý hành động đó (BloC) giúp code trở nên rõ ràng và dễ bảo trì hơn.
• Dễ mở rộng: Khi cần thêm các tính năng mới, chúng ta chỉ cần định nghĩa thêm các event mới mà không cần sửa đổi quá nhiều code ở các thành phần khác.
• Dễ kiểm thử: Việc kiểm thử các trường hợp khác nhau của ứng dụng trở nên dễ dàng hơn khi chúng ta có thể tạo ra các event để mô phỏng các hành động của người dùng.

Tóm lại, Event là một khái niệm quan trọng trong kiến trúc BloC. Nó giúp chúng ta xây dựng các ứng dụng Flutter một cách có cấu trúc, dễ hiểu và dễ bảo trì.

State: Trạng thái

Định nghĩa: State là một đối tượng mô tả trạng thái hiện tại của một phần hoặc toàn bộ ứng dụng tại một thời điểm cụ thể. Trong ngữ cảnh của BloC, state được sử dụng để phản ánh những thay đổi trong dữ liệu hoặc giao diện người dùng.

Vai trò:

• Cập nhật giao diện: Khi state thay đổi, các widget sẽ tự động rebuild để phản ánh những thay đổi đó.
• Lưu trữ dữ liệu: State có thể lưu trữ các dữ liệu cần thiết cho việc hiển thị và tương tác với ứng dụng.
• Truyền dữ liệu: State được truyền từ BloC đến các widget để cập nhật giao diện.

Ví dụ:

• Ứng dụng danh sách việc làm: State có thể chứa danh sách các công việc, trạng thái tải dữ liệu (đang tải, đã tải, lỗi), trạng thái chọn một công việc.
• Ứng dụng đăng nhập: State có thể chứa thông tin người dùng đã đăng nhập, trạng thái đăng nhập (đã đăng nhập, chưa đăng nhập), thông báo lỗi khi đăng nhập.

Stream: Dòng dữ liệu

Định nghĩa: Stream là một chuỗi các dữ liệu phát ra theo thời gian. Trong ngữ cảnh của BloC, stream được sử dụng để truyền tải các state từ BloC đến các widget.

Vai trò:

• Truyền tải dữ liệu: Stream cho phép truyền tải dữ liệu một cách hiệu quả và phản ứng.
• Cập nhật UI: Các widget lắng nghe stream của BloC để nhận các state mới và cập nhật giao diện.

Ví dụ:

• Ứng dụng chat: Stream được sử dụng để truyền tải các tin nhắn mới từ server đến ứng dụng, giúp cho giao diện chat luôn được cập nhật.

Đọc thêm:

• Flutter roadmap: Lộ trình học Flutter toàn diện A-Z
• Học Flutter toàn diện với 50+ tài liệu Flutter mới nhất

Sơ đồ hoạt động của BloC Flutter

flowchart LR
    A(UI) --> B(Event)
    B --> C(Bloc)
    C --> D(State)
    D --> A
    subgraph Bloc
        C --> E(Stream)
    end

Giải thích:

• Người dùng tương tác với giao diện (UI), tạo ra các event.
• Event được gửi đến BloC.
• BloC xử lý event và tạo ra một state mới.
• State mới được phát ra qua stream.
• Các widget lắng nghe stream và cập nhật giao diện dựa trên state mới.

Tóm tắt

• Event: Mô tả một hành động hoặc sự kiện.
• State: Mô tả trạng thái hiện tại của ứng dụng.
• BloC: Xử lý logic nghiệp vụ và quản lý state.
• Stream: Truyền tải state từ BloC đến widget.

Các khái niệm nâng cao:

• Middleware: Cho phép chặn, sửa đổi hoặc thực hiện các tác vụ phụ trước khi event được xử lý.
• BloCProvider: Cung cấp một cách để cung cấp BloC cho các widget con.
• Cubit: Một phiên bản đơn giản hóa của BloC, phù hợp với các trường hợp sử dụng đơn giản.

Ưu điểm của BloC Pattern

• Tách biệt rõ ràng: Tách biệt rõ ràng giữa logic nghiệp vụ và UI.
• Dễ kiểm thử: Logic nghiệp vụ có thể được kiểm thử riêng biệt với UI.
• Khả năng mở rộng: Dễ mở rộng ứng dụng bằng cách thêm tính năng mới mà không ảnh hưởng đến chức năng hiện tại.
• Dễ bảo trì: Dễ bảo trì do thay đổi trong logic nghiệp vụ không ảnh hưởng đến UI và ngược lại.

Tổng kết: Hiểu rõ về State, BloC và Stream là nền tảng để bạn có thể áp dụng kiến trúc BloC vào các dự án Flutter của mình. Bằng cách tách biệt logic nghiệp vụ khỏi giao diện người dùng, bạn sẽ xây dựng được các ứng dụng Flutter có cấu trúc tốt, dễ bảo trì và mở rộng.

BloC pattern là một cách mạnh mẽ để quản lý trạng thái trong ứng dụng Flutter. Bằng cách tách biệt logic nghiệp vụ khỏi UI, nó giúp ứng dụng của bạn dễ bảo trì, mở rộng và kiểm thử hơn. Hiểu và thực hiện BloC pattern có thể cải thiện quy trình phát triển và dẫn đến mã sạch hơn, hiệu quả hơn.

Cách triển khai BloC Flutter

Kế thừa từ lớp BloC: Tạo một lớp mới kế thừa từ lớp BloC trong thư viện flutter_BloC. Lớp này sẽ định nghĩa các event, state và logic xử lý của BloC.

Định nghĩa event và state:

• Event: Tạo các lớp con của Equatable để đại diện cho các sự kiện có thể xảy ra.
• State: Tạo các lớp con của Equatable để đại diện cho các trạng thái khác nhau của ứng dụng.

Implement mapEventToState: Phương thức này nhận một event và trả về một stream của state mới. Đây là nơi bạn thực hiện logic xử lý event và cập nhật state.

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:equatable/equatable.dart';

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc
  extends Bloc<Counter Event, CounterState> {
    CounterBloc(): super(const CounterState())
  {
      on<IncrementEvent>((event, emit) => emit (state.increment()));
      on<DecrementEvent>((event, emit) => emit (state.decrement()));
  }
}

Tạo BloC class

Để tạo một lớp BloC trong Flutter, bạn cần làm theo các bước sau đây:

Bước 1: Định nghĩa các sự kiện (Event)

Sự kiện là các hành động mà người dùng thực hiện hoặc là các sự kiện mà ứng dụng cần xử lý. Bạn cần tạo các lớp sự kiện để biểu diễn những hành động này.

Ví dụ: Trong một ứng dụng đếm, bạn có thể có các sự kiện Increment và Decrement.

// counter_event.dart
abstract class CounterEvent {}

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

Bước 2: Định nghĩa các trạng thái (State)

Trạng thái là dữ liệu hiện tại của ứng dụng. Bạn cần tạo các lớp trạng thái để biểu diễn những dữ liệu này.

Ví dụ: Trong ứng dụng đếm, trạng thái là giá trị của bộ đếm.

// counter_state.dart
class CounterState {
  final int counterValue;
  CounterState(this.counterValue);
}

Bước 3: Tạo lớp BloC

Lớp BloC sẽ chứa logic nghiệp vụ của ứng dụng. Nó sẽ lắng nghe các sự kiện và phát ra các trạng thái mới dựa trên các sự kiện này.

// counter_BloC.dart
import 'dart:async';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloC {
  final _counterStateController = StreamController<CounterState>();
  Stream<CounterState> get counter => _counterStateController.stream;

  final _counterEventController = StreamController<CounterEvent>();
  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;

  int _counterValue = 0;

  CounterBloC() {
    _counterEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is IncrementEvent) {
      _counterValue++;
    } else if (event is DecrementEvent) {
      _counterValue--;
    }
    _counterStateController.add(CounterState(_counterValue));
  }

  void dispose() {
    _counterStateController.close();
    _counterEventController.close();
  }
}

Bước 4: Tích hợp BloC với UI

Sử dụng StreamBuilder để lắng nghe các thay đổi trạng thái từ BloC và cập nhật UI tương ứng.

// main.dart
import 'package:flutter/material.dart';
import 'counter_BloC.dart';
import 'counter_event.dart';
import 'counter_state.dart';

void main() => runApp(MyApp());

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

class CounterPage extends StatelessWidget {
  final CounterBloC _BloC = CounterBloC();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BloC Pattern')),
      body: StreamBuilder<CounterState>(
        stream: _BloC.counter,
        initialData: CounterState(0),
        builder: (context, snapshot) {
          return Center(
            child: Text(
              'Counter: ${snapshot.data.counterValue}',
              style: TextStyle(fontSize: 24),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => _BloC.counterEventSink.add(IncrementEvent()),
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => _BloC.counterEventSink.add(DecrementEvent()),
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

Bước 5: Dọn dẹp tài nguyên

Đừng quên gọi phương thức dispose của BloC khi bạn không còn sử dụng nó để giải phóng tài nguyên.

@override
void dispose() {
  _BloC.dispose();
  super.dispose();
}

Tóm tắt để tạo một class BloC, chúng ta cần phải:

• Định nghĩa các sự kiện và trạng thái: Tạo các lớp để biểu diễn sự kiện và trạng thái của ứng dụng.
• Tạo lớp BloC: Lớp này chứa logic nghiệp vụ, lắng nghe sự kiện và phát ra trạng thái.
• Tích hợp BloC với UI: Sử dụng StreamBuilder để lắng nghe các thay đổi trạng thái từ BloC và cập nhật UI.
• Dọn dẹp tài nguyên: Đảm bảo giải phóng tài nguyên khi không còn sử dụng BloC.

Như vậy, bạn đã biết cách tạo một lớp BloC trong Flutter và tích hợp nó vào ứng dụng của mình.

Xử lý event trong BloC class

• Nhận event: Trong phương thức mapEventToState, BloC nhận được event được gửi từ UI.
• Thực hiện logic: Dựa trên loại event, BloC sẽ thực hiện các phép tính, gọi API hoặc các tác vụ khác để cập nhật state.
• Tránh thay đổi state trực tiếp: Luôn sử dụng hàm emit để phát ra state mới.

Cập nhật state trong BloC class

• Sử dụng hàm emit: Khi cần cập nhật state, gọi hàm emit với state mới.
• Tạo state mới: Tạo một đối tượng state mới dựa trên state hiện tại và các thay đổi cần thực hiện.
• Phát ra state mới: Hàm emit sẽ tự động phát ra state mới qua stream.

Truy cập BloC từ widget

• Sử dụng BloCProvider: Wrap widget cha của widget cần truy cập BloC bằng BloCProvider.
• Truy cập BloC: Trong widget con, sử dụng context.read<YourBloC>() hoặc context.watch<YourBloC>() để truy cập vào instance của BloC.

class MyWidget extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    final counterBloc = context.read<CounterBloc>();
    return ElevatedButton(
      onPressed: () {
        counterBloc.add(IncrementEvent());
      },
      child: Text('Increment'),
    );
  }
}

Sử dụng BloCProvider để cung cấp BloC cho widget con

• Wrap widget cha: Sử dụng BloCProvider để wrap widget cha của tất cả các widget cần truy cập BloC.
• Truyền BloC: Truyền instance của BloC vào create: (context) => YourBloC() trong BloCProvider.
• Truy cập BloC: Các widget con có thể truy cập BloC bằng cách sử dụng context.read hoặc context.watch.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => Counter Bloc(),

        child: MyHomePage(),
      ),
    );
  }
}

Giải thích chi tiết hơn:

• Equatable: Sử dụng để so sánh các đối tượng state và event một cách hiệu quả.
• mapEventToState: Đây là trái tim của BloC, nơi logic xử lý event diễn ra.
• emit: Hàm này được sử dụng để phát ra state mới. Khi state thay đổi, các widget lắng nghe sẽ tự động rebuild.
• context.read: Được sử dụng để đọc BloC mà không gây ra rebuild.
• context.watch: Được sử dụng để đọc BloC và gây ra rebuild khi state thay đổi.

Ví dụ cụ thể:

Giả sử chúng ta có một ứng dụng đếm số.

• Event: IncrementEvent, DecrementEvent.
• State: CounterState (chứa giá trị counter).
• BloC: CounterBloC xử lý các event tăng giảm giá trị counter và cập nhật state.
• Widget: Hiển thị giá trị counter và có hai nút tăng giảm.

Khi người dùng nhấn nút tăng, một IncrementEvent được gửi đến CounterBloC. BloC tăng giá trị counter và phát ra state mới. Widget lắng nghe state này và cập nhật giao diện để hiển thị giá trị counter mới.

Ví dụ ứng dụng thực tế của BloC Flutter

Để hiểu rõ hơn về cách sử dụng BloC trong thực tế, chúng ta sẽ xây dựng một ứng dụng Flutter đơn giản: một counter. Ứng dụng này sẽ có hai nút: “Tăng” và “Giảm”, và một text hiển thị giá trị hiện tại của counter.

Cấu trúc dự án

• event: IncrementEvent, DecrementEvent
• state: CounterState (chứa giá trị hiện tại của counter)
• BloC: CounterBloC (xử lý các event và cập nhật state)
• widget: CounterPage (hiển thị giao diện và tương tác với BloC)

Mã code chi tiết

Thiết lập cơ bản

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0

Trước hết, chúng ta cần cài đặt thư viện flutter_BloC trong dự án Flutter:

Sau đó, chúng ta sẽ định nghĩa các phần chính của mô hình BloC: Event, State, và BloC.

Định nghĩa các Events

Event trong ứng dụng Counter này sẽ bao gồm hai loại: Increment và Decrement.

// counter_event.dart
abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

Định nghĩa State

State sẽ biểu diễn trạng thái hiện tại của bộ đếm.

// counter_state.dart
class CounterState {
  final int counterValue;

  CounterState({required this.counterValue});
}

Định nghĩa BloC

BloC sẽ quản lý logic xử lý cho các sự kiện và cập nhật state.

// 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 (counterValue: 0)) {
    on<IncrementEvent>((event, emit) {
      emit (CounterState (counterValue: state.counterValue + 1));
    });

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

Xây dựng giao diện người dùng

Sử dụng BloCProvider và BloCBuilder để quản lý BloC và hiển thị trạng thái hiện tại của bộ đếm.

// main.dart
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(MyApp());
}

class MyApp extends StatelessWidget {
  @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('Counter App with BloC')),
      body: Center(
        child: BloCBuilder<CounterBloC, CounterState>(
          builder: (context, state) {
            return Text(
              'Counter Value: ${state.counterValue}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              counterBloC.add(IncrementEvent());
            },
            child: Icon(Icons.add),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: () {
              counterBloC.add(DecrementEvent());
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

Phân tích cách BloC hoạt động trong ví dụ:

• Tạo BloC: Chúng ta tạo một CounterBloC để quản lý trạng thái của counter.
• Định nghĩa event và state: IncrementEvent và DecrementEvent đại diện cho hai hành động tăng và giảm, trong khi CounterState lưu trữ giá trị hiện tại của counter.
• Xử lý event: Trong CounterBloC, chúng ta định nghĩa cách xử lý các event. Khi nhận được IncrementEvent, chúng ta tăng giá trị của state và phát ra state mới. Tương tự với DecrementEvent.
• Cập nhật giao diện: Trong CounterPage, chúng ta sử dụng BloCBuilder để lắng nghe các thay đổi của state. Mỗi khi state thay đổi, widget sẽ được rebuild để hiển thị giá trị counter mới.
• Tương tác người dùng: Khi người dùng nhấn vào các nút, các event tương ứng được gửi đến CounterBloC và quá trình cập nhật state và giao diện được lặp lại.

Ưu điểm của việc sử dụng BloC trong ví dụ này:

• Tách biệt mối quan tâm: Logic tăng giảm counter được tách biệt hoàn toàn với giao diện.
• Dễ kiểm thử: Chúng ta có thể dễ dàng viết các test case để kiểm tra hành vi của CounterBloC.
• Dễ bảo trì: Code trở nên rõ ràng và dễ hiểu hơn.
• Tái sử dụng: CounterBloC có thể được sử dụng trong các phần khác của ứng dụng.

Tóm lại

Ví dụ đơn giản này đã minh họa cách sử dụng BloC để quản lý trạng thái của một ứng dụng Flutter. Bằng cách tách biệt logic nghiệp vụ khỏi giao diện, chúng ta có thể xây dựng các ứng dụng Flutter một cách hiệu quả và dễ bảo trì.

Thực hành BloC Flutter nâng cao

Sử dụng BloC với RxDart

RxDart cung cấp một bộ công cụ mạnh mẽ để làm việc với các luồng dữ liệu (streams) trong Dart. Khi kết hợp với BloC, RxDart giúp quản lý các sự kiện và trạng thái một cách hiệu quả hơn.

Các lợi ích khi kết hợp BloC với RxDart:

• Biểu diễn dữ liệu theo thời gian: RxDart cho phép bạn mô hình hóa dữ liệu thay đổi theo thời gian, rất phù hợp với các ứng dụng phản ứng như Flutter.
• Các toán tử: RxDart cung cấp một loạt các toán tử để biến đổi và kết hợp các streams, giúp bạn viết code ngắn gọn và dễ đọc hơn.
• Quản lý lỗi: RxDart có các cơ chế xử lý lỗi mạnh mẽ, giúp bạn đảm bảo ứng dụng luôn hoạt động ổn định.

import 'package: bloc/bloc.dart';
import 'package:rxdart/rxdart.dart';

class Counter Bloc extends Bloc<Counter Event, int> {
  CounterBloc(): super(0) {
    on<IncrementEvent>((event, emit) => emit (state + 1));
  }
}

class IncrementEvent {}

Kết hợp BloC với các thư viện khác

Repository:

• Tách biệt logic truy cập dữ liệu: Repository là một lớp trừu tượng cung cấp một giao diện để truy cập dữ liệu từ các nguồn khác nhau (database, API, …).
• Cải thiện khả năng test: Việc tách biệt logic truy cập dữ liệu giúp bạn dễ dàng viết các unit test cho BloC.

API Client:

• Truy cập dữ liệu từ server: API client là một lớp giúp bạn thực hiện các yêu cầu HTTP để lấy dữ liệu từ server.
• Xử lý lỗi: API client thường có các cơ chế xử lý lỗi như timeouts, errors, …

Xử lý lỗi trong BloC

• CatchError: Sử dụng toán tử catchError của RxDart để bắt các lỗi xảy ra trong quá trình xử lý event.
• MapEventToState: Xử lý lỗi ngay trong hàm mapEventToState của BloC.
• Custom Error State: Tạo một trạng thái riêng để biểu diễn lỗi và hiển thị thông báo cho người dùng.

class Counter Bloc extends Bloc<Counter Event, int> {
  CounterBloc(): super(0) {
    on<IncrementEvent>((event, emit) async {
      try {
        // Logic tăng giá trị
        emit(state + 1);
      } catch (e) {
        // Xử lý lỗi
        emit(state);
      }
    });
  }
}

Kiểm thử BloC

• Unit test: Kiểm tra từng phần của BloC một cách độc lập.
• Widget test: Kiểm tra cách BloC tương tác với các widget.
• Integration test: Kiểm tra toàn bộ ứng dụng, bao gồm cả BloC và các thành phần khác.

import 'package: flutter_test/flutter_test.dart';
import 'package:bloc_test/bloc_test.dart';
import 'package: my app/counter_bloc.dart';

void main() {
  group('Counter Bloc', () {
    test('increments state', () async {
      final bloc = Counter Bloc();
      await expectLater (
        bloc,
        emitsInOrder ([
          0,
          1,
        ]),
      );
      bloc.add(IncrementEvent());
      await bloc.close();
    });
  });
}

Tóm lại

• Sử dụng RxDart: Tăng cường khả năng quản lý luồng dữ liệu và xử lý các sự kiện phức tạp.
• Kết hợp với các thư viện khác: Tách biệt các phần quan trọng của ứng dụng, tăng khả năng tái sử dụng và bảo trì.
• Xử lý lỗi hiệu quả: Đảm bảo ứng dụng luôn hoạt động ổn định, ngay cả khi xảy ra lỗi.
• Viết các test case: Đảm bảo chất lượng code và phát hiện lỗi sớm.

Các câu hỏi thường gặp về BloC Flutter

BloC Flutter là gì?

BloC, viết tắt của Business Logic Component, là một mô hình quản lý state giúp tách biệt logic nghiệp vụ khỏi giao diện người dùng trong ứng dụng Flutter. BloC giúp cải thiện khả năng kiểm tra, khả năng mở rộng, và tăng tính dễ bảo trì của ứng dụng bằng cách quản lý state và các sự kiện một cách rõ ràng và có tổ chức.

Đọc thêm: Lập trình Flutter: Hướng dẫn cách phát triển ứng dụng với Flutter

Các lợi ích của việc sử dụng BloC Flutter là gì?

• Tăng khả năng đọc và bảo trì code: Code trở nên rõ ràng hơn, dễ hiểu hơn.
• Quản lý trạng thái phức tạp dễ dàng: BloC giúp bạn xử lý các trạng thái phức tạp.
• Tái sử dụng code: Các BloC có thể được tái sử dụng trong nhiều phần khác nhau của ứng dụng.
• Cải thiện hiệu suất: Nhờ cơ chế stream, các widget chỉ được cập nhật khi có sự thay đổi trạng thái.

Khi nào nên sử dụng BloC và khi nào nên sử dụng các phương pháp quản lý state khác?

BloC phù hợp với các ứng dụng có logic phức tạp, nhiều state và cần quản lý luồng dữ liệu một cách rõ ràng. Đối với các ứng dụng đơn giản, bạn có thể sử dụng các phương pháp khác như setState hoặc Provider.

Tóm lại, nên sử dụng BloC Flutter khi:

• Các ứng dụng có logic nghiệp vụ phức tạp.
• Các ứng dụng cần quản lý nhiều trạng thái khác nhau.
• Các ứng dụng yêu cầu hiệu suất cao.

Làm thế nào để truyền dữ liệu từ BloC đến widget?

Bạn có thể sử dụng các thư viện như flutter_BloC hoặc provider để cung cấp BloC cho widget con và sử dụng BloCBuilder hoặc Consumer để xây dựng giao diện dựa trên state của BloC.

Tổng kết BloC Flutter

BloC Flutter là một trong những mô hình quản lý state mạnh mẽ và linh hoạt nhất trong Flutter, giúp tách biệt rõ ràng giữa logic nghiệp vụ và giao diện người dùng. Với việc sử dụng các event và state, BloC cung cấp một cơ chế rõ ràng và có tổ chức để quản lý state, đồng thời giúp cải thiện khả năng kiểm tra, bảo trì và mở rộng của ứng dụng. Bằng cách tận dụng Streams, BloC cho phép quản lý luồng dữ liệu bất đồng bộ một cách hiệu quả, đảm bảo giao diện người dùng luôn phản ánh chính xác trạng thái hiện tại của ứng dụng.

Dù bạn đang phát triển một ứng dụng nhỏ hay một hệ thống phức tạp, BloC có thể là một lựa chọn phù hợp để quản lý state và logic nghiệp vụ. Tuy nhiên, việc lựa chọn mô hình quản lý state cần phải dựa trên yêu cầu cụ thể của dự án và hiểu rõ các ưu và nhược điểm của từng giải pháp. BloC, với cộng đồng mạnh mẽ và tài liệu phong phú, là một công cụ đáng để khám phá và áp dụng trong các dự án Flutter của bạn.