Flutter bloc Hướng dẫn

Flutter đang trở nên phổ biến hơn mỗi ngày, mặc dù nó là một công nghệ còn khá non trẻ. Nó xuất hiện lần đầu tiên vào năm 2015 với tên gọi Sky, và vào năm 2017, nó đã trở thành Flutter mà chúng ta biết và sử dụng. Flutter được hỗ trợ bởi Google và cho phép các nhà phát triển tạo ra các ứng dụng đa nền tảng đẹp mắt và tiết kiệm chi phí với cảm giác nguyên bản.

Có nhiều kiến ​​trúc bạn có thể sử dụng để xây dựng các ứng dụng Flutter:

• Vanilla
• InheritedWidget
• ChangeNotifier + Nhà cung cấp
• BLoC
• MobX
• Redux

Quyền tự do lựa chọn này có thể rất bổ ích, nhưng nó cũng có thể dẫn đến việc đặt tên không nhất quán và các lớp cồng kềnh. Trong bài viết này, tôi sẽ nói về kiến ​​trúc BLoC, được nhiều lập trình viên coi là một trong những lựa chọn tốt nhất để phát triển Flutter.

Mô hình kiến ​​trúc BLoC là gì?

BLoC là viết tắt của Business Logic Component, và như tên của nó, đó là một mẫu kiến ​​trúc có các thành phần riêng biệt ở cốt lõi của nó. Kiến trúc BLoC (bạn có thể sử dụng bằng cách tích hợp thư viện BLoC vào dự án của mình) do Felix Angelov tạo ra và được giới thiệu tại Google I / O vào năm 2019.

Lưu ý rằng BLoC là một mẫu, không phải là một kiến ​​trúc. Bạn vẫn cần tổ chức dữ liệu trong ứng dụng của mình theo một kiến ​​trúc như DDD, MVVM hoặc Clean.

BLoC giúp tổ chức các luồng dữ liệu và ngày nay nó là mẫu phổ biến nhất để phát triển Flutter. Hãy cùng khám phá lý do tại sao.

Lợi ích của kiến ​​trúc BLoC

Kiến trúc BLoC có ba lợi ích cốt lõi. Nó là:

• Đơn giản
• Có thể kiểm tra
• Quyền lực

Điều gì làm cho nó như vậy? Kiến trúc BLoC cho phép các nhà phát triển giữ các lớp khác nhau của ứng dụng của bạn riêng biệt - cụ thể là lớp trình bày và lớp logic nghiệp vụ. Điều này giúp bạn dễ dàng kiểm tra và sử dụng lại các phần tử trong các phần khác nhau của mã.

Kiến trúc BLoC cũng giúp các nhà phát triển quản lý trạng thái, vì họ có thể biết trạng thái của ứng dụng bất kỳ lúc nào. Nó cũng làm cho việc kiểm tra trở nên dễ dàng hơn, vì việc viết các bài kiểm tra cho các phần cụ thể của mã sẽ thuận tiện hơn nhiều.

Việc tách bản trình bày khỏi logic nghiệp vụ cho phép các nhà phát triển sử dụng lại các phần tử không chỉ bên trong một ứng dụng mà còn trên các ứng dụng. Một ưu điểm khác của phương pháp BLoC là một số thành viên trong nhóm có thể làm việc liền mạch trên một cơ sở mã duy nhất. Và bởi vì logic nghiệp vụ là riêng biệt, các nhà phát triển sẽ dễ dàng làm theo các mẫu giống nhau hơn.

Nguyên tắc chính của kiến ​​trúc BLoC là tạo ra các sản phẩm phức tạp từ các khối đơn giản. Nếu bạn có một nhà phát triển cơ sở trong dự án của mình, thì kiến ​​trúc BLoC sẽ giúp họ dễ dàng hiểu cách mọi thứ hoạt động. Ngay cả đối với các nhà phát triển có kinh nghiệm, kiến ​​trúc BLoC cắt giảm thời gian cần thiết để làm quen với một dự án. Điều này đặc biệt quan trọng khi làm việc với thời hạn chặt chẽ và để phát triển thương mại.

Vì kiến ​​trúc này giữ cho các phần của ứng dụng nhỏ và tách biệt, bạn có thể dễ dàng kiểm tra từng khía cạnh của ứng dụng và biết chính xác những gì cần sửa.

Ngoài ra, kiến ​​trúc BLoC thực thi một cách duy nhất để thay đổi trạng thái trên toàn bộ ứng dụng, giúp logic kinh doanh của ứng dụng của bạn có thể dự đoán và nhất quán.

Bây giờ chúng ta đã thảo luận về những ưu điểm của kiến ​​trúc BLoC, tôi sẽ nói một chút về logic của nó.

Cách thức hoạt động của kiến ​​trúc BLoC

Trước khi đi sâu vào logic của kiến ​​trúc BLoC, chúng ta hãy tìm hiểu các khái niệm chính của nó.

• Sự kiện và hành động là đầu vào xuất hiện khi người dùng tương tác với giao diện người dùng: ví dụ: vuốt hoặc cuộn.
• Trạng thái là phản ứng đối với những hành động này và chúng thay đổi theo sự kiện mà người dùng bắt đầu bằng cách tương tác với giao diện.
• Một khối là một thành phần nào chịu trách nhiệm về logic kinh doanh. Nó chuyển đổi các sự kiện thành các trạng thái và là phần tử xử lý nhận thông tin và phản hồi tương ứng.
• Một dòng là một dòng chảy không đồng bộ dữ liệu có giao diện người dùng (UI) và khối phản ứng.

Logic của kiến ​​trúc BLoC như sau: khi người dùng thực hiện một hành động bằng cách tương tác với giao diện người dùng, thông tin về hành động này sẽ được chuyển đến thành phần BLoC. Sau đó, thành phần BLoC xử lý và diễn giải thông tin này và phản hồi bằng cách thay đổi trạng thái của thành phần UI.

Tích hợp từng bước kiến ​​trúc BLoC

Trước tiên, bạn cần tổ chức ứng dụng Flutter theo một mẫu kiến ​​trúc như DDD, MVVM hoặc Clean. Sau đó, kiến ​​trúc BLoC hoạt động giống như một mẫu sắp xếp hơn nữa các luồng dữ liệu trong ứng dụng của bạn.

Sau khi bạn thiết lập kiến ​​trúc của mình, bạn cần tích hợp phần tử BLoC vào nó.

Bước 1: Thêm kiến ​​trúc BLoC vào dự án của bạn

Để triển khai kiến ​​trúc BLoC, bạn cần tích hợp thư viện BLoC vào dự án của mình. Để thực hiện việc này, bạn cần thêm phần phụ thuộc flay_bloc: ^ 2.0.1 vào tệp pub spec.yaml của mình. Chúc mừng! Bây giờ bạn có một gói Flutter sẽ cho phép bạn triển khai mẫu BLoC.

Bước 2. Thiết lập Widget trong Thư viện BLoC

Có ba widget chính trong thư viện BLoC:

• Khối
• BlocBuilder
• BlocProvider

Bạn sẽ cần chúng để thiết lập BLoC, xây dựng BLoC đó theo những thay đổi trong trạng thái của ứng dụng và thiết lập các phụ thuộc. Hãy xem cách triển khai từng tiện ích con và sử dụng nó trong logic kinh doanh của ứng dụng của bạn.

Khối

Widget Bloc là thành phần cơ bản bạn sẽ cần để triển khai tất cả logic nghiệp vụ. Để sử dụng nó, hãy mở rộng lớp Bloc và ghi đè các phương thức mapEventToState và initialState .

Trong mapEventToState , bạn sẽ cần xử lý các đối số đại diện cho các hành động. Sau khi làm điều đó, bạn sẽ cần trả lại từng đối số dưới dạng trạng thái. Đây là một ví dụ:

enum CounterEvent { increment, decrement } class CounterBloc extends Bloc { @override int get initialState => 0; @override Stream mapEventToState(CounterEvent event) async* { switch (event) { case CounterEvent.decrement: yield state - 1; break; case CounterEvent.increment: yield state + 1; break; } } }

Như bạn có thể thấy, ở đây bạn lấy CounterEvent và xử lý nó tùy thuộc vào loại sự kiện. Trạng thái (một int trong ví dụ này) sau đó được trả về.

Nếu bạn muốn tùy chỉnh phản hồi, bạn có thể tạo trạng thái hoặc sự kiện trừu tượng:

//Customized state @immutable abstract class IncomingState {} class InitialIncomingState extends IncomingState {} class HandledState extends IncomingState { final int counter; HandledState(this.counter); }@immutable abstract class IncomingEvent {} class IncrementEvent extends IncomingEvent { IncrementEvent(); }class DecrementEvent extends IncomingEvent { DecrementEvent(); }

BlocBuilder

BlocBuilder là một widget phản ứng với các trạng thái mới bằng cách xây dựng BLoC. Tiện ích con này có thể được gọi nhiều lần và hoạt động giống như một chức năng phản ứng với những thay đổi về trạng thái bằng cách tạo các tiện ích con sau đó hiển thị dưới dạng các phần tử giao diện người dùng mới.

Để có được BLoC dưới dạng một widget duy nhất sẽ không thể truy cập được thông qua BlocProvider và BuildContext, bạn cần chỉ định khối như sau:

BlocBuilder( bloc: blocA, // provide the local bloc instance builder: (context, state) { // return widget here based on the state of BlocA} )

Như bạn có thể thấy, bạn cần cung cấp một lớp Khối mở rộng trong đối số khối. Các phiên bản của các lớp trạng thái của bạn sẽ xuất hiện trong BlocBuilder. Hãy nhớ rằng trạng thái đầu tiên là trạng thái đã được tạo trước đó trong phương thức InitialState .

Để tránh rò rỉ bộ nhớ, bạn không nên tạo một phiên bản của lớp Bloc khi tạo lớp BlocBulider. Nếu bạn làm vậy, bạn sẽ không thể đóng luồng trong lớp Khối. Lời khuyên của tôi là tạo một cá thể Bloc trong phương thức initState và đóng nó bằng blocA.close () trong phương thức vứt bỏ .

BlocProvider

Widget này hoạt động như một phụ thuộc, có nghĩa là nó có thể cung cấp BLoC cho một số widget cùng một lúc thuộc cùng một cây con. BlocProvider được sử dụng để xây dựng các khối mà sau đó sẽ có sẵn cho tất cả các tiện ích con trong cây con. Và bởi vì BlocProvider xây dựng các khối, nó cũng có thể đóng chúng.

BlocProvider( builder: (BuildContext context) => BlocA(), child: ChildA(), );

Lưu ý rằng bạn cũng có thể sử dụng BlocProvider để cung cấp một khối mà bạn đã có với một cây tiện ích con mới. Bằng cách này, bạn có thể mở rộng khả năng của một khối hiện có thay vì tạo một khối mới. Tuy nhiên, trong trường hợp này, BlocProvider sẽ không đóng khối vì nó không tạo ra nó.

Bước 3. Tạo sự kiện

Để thực hiện bất kỳ hành động nào với dữ liệu - xử lý nó, gửi nó qua internet, lưu nó vào cơ sở dữ liệu - bạn cần tạo một sự kiện trong thành phần Bloc của mình. Để làm điều này, bạn chỉ cần gọi phương thức này:

bloc.add(YourEvent());

Đó là nó! Bây giờ thành phần Khối sẽ có thể xử lý sự kiện của bạn.

Như bạn có thể thấy, việc thiết lập mẫu kiến ​​trúc BLoC của bạn rất dễ dàng với thư viện BLoC.

Lời kết

Mẫu BLoC là một trong những cách tốt nhất để nâng cao và tổ chức kiến ​​trúc ứng dụng Flutter của bạn. Thật dễ dàng để thiết lập và sử dụng, đồng thời giúp mã của bạn có thể dự đoán và dễ kiểm tra.

Để triển khai mẫu BLoC trong ứng dụng Flutter của bạn, chỉ cần tích hợp thư viện BLoC, sau đó tạo và thiết lập các widget cần thiết sẽ quyết định hành vi và logic kinh doanh của ứng dụng của bạn. Cuối cùng, sử dụng các sự kiện để thao tác dữ liệu trong ứng dụng của bạn và thiết lập kết nối giữa các hành động và kết quả.

Tôi đề xuất kiến ​​trúc BLoC cho bất kỳ dự án Flutter nào, vì nó giúp mã có thể bảo trì được và giúp bạn loại bỏ mã viết sẵn và mã spaghetti bằng cách giữ cho từng phần của ứng dụng của bạn được tổ chức riêng biệt và thuận tiện.