Flutter Bloc Hướng Dẫn 2022 - Bật Bảo Vệ Avatar Fb

Kinh Nghiệm Hướng dẫn Flutter bloc Hướng dẫn 2022

Ban đang tìm kiếm từ khóa Flutter bloc Hướng dẫn được Update vào lúc : 2022-02-04 11:28:39 . Với phương châm chia sẻ Bí quyết về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi đọc tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha.

Cách tăng trưởng ứng dụng Flutter của bạn với kiến ​​trúc BLoC

Hoàng Đan Tâm · Hoàng Đan Tâm 17:00 22/10/2022 6 giờ trước

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

Nội dung chính

Cách tăng trưởng ứng dụng Flutter của bạn với kiến ​​trúc BLoCMô hình kiến ​​trúc BLoC là gì?Lợi ích của kiến ​​trúc BLoCCách thức hoạt động và sinh hoạt giải trí của kiến ​​trúc BLoCTích hợp từng bước kiến ​​trúc BLoCBước 1: Thêm kiến ​​trúc BLoC vào dự án công trình bất Động sản của bạnBước 2. Thiết lập Widget trong Thư viện BLoCBlocBuilderBlocProviderBước 3. Tạo sự kiệnLời kếtVideo liên quan

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

VanillaInheritedWidgetChangeNotifier + Nhà cung cấpBLoCMobXRedux

Quyền tự do lựa chọn này hoàn toàn có thể rất có ích, nhưng nó cũng hoàn toàn có thể dẫn đến việc đặt tên không nhất quán và những lớp cồng kềnh. Trong nội dung 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 xem là một trong những lựa chọn tốt nhất để tăng trưởng 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ó những thành phần riêng không liên quan gì đến nhau ở cốt lõi của nó. Kiến trúc BLoC (bạn hoàn toàn có thể sử dụng bằng phương pháp tích hợp thư viện BLoC vào dự án công trình bất Động sản của tớ) do Felix Angelov tạo ra và được trình làng tại Google I / O vào năm 2022.

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 triển khai tài liệu trong ứng dụng của tớ theo một kiến ​​trúc như DDD, MVVM hoặc Clean.

BLoC giúp tổ chức triển khai những luồng tài liệu và ngày này nó là mẫu phổ cập nhất để tăng trưởng Flutter. Hãy cùng mày mò nguyên do tại sao.

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

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

Đơn giảnCó thể kiểm traQuyền lực

Điều gì làm cho nó như vậy? Kiến trúc BLoC được cho phép những nhà tăng trưởng giữ những lớp rất khác nhau của ứng dụng của bạn riêng không liên quan gì đến nhau – rõ ràng là lớp trình diễn và lớp logic trách nhiệm. Điều này giúp bạn thuận tiện và đơn thuần và giản dị kiểm tra và sử dụng lại những thành phần trong những phần rất khác nhau của mã.

Kiến trúc BLoC cũng giúp những nhà tăng trưởng quản trị và vận hành trạng thái, vì họ hoàn toàn 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 thuận tiện và đơn thuần và giản dị hơn, vì việc viết những bài kiểm tra cho những phần rõ ràng của mã sẽ thuận tiện hơn nhiều.

Việc tách bản trình diễn khỏi logic trách nhiệm được cho phép những nhà tăng trưởng sử dụng lại những thành phần không riêng gì có bên trong một ứng dụng mà còn trên những ứng dụng. Một ưu điểm khác của phương pháp BLoC là một số trong những thành viên trong nhóm hoàn toàn có thể thao tác liền mạch trên một cơ sở mã duy nhất. Và chính bới logic trách nhiệm là riêng không liên quan gì đến nhau, những nhà tăng trưởng sẽ thuận tiện và đơn thuần và giản dị tuân theo bộ sưu tập giống nhau hơn.

Nguyên tắc chính của kiến ​​trúc BLoC là tạo ra những thành phầm phức tạp từ những khối đơn thuần và giản dị. Nếu bạn có một nhà tăng trưởng cơ sở trong dự án công trình bất Động sản của tớ, thì kiến ​​trúc BLoC sẽ hỗ trợ họ thuận tiện và đơn thuần và giản dị hiểu cách mọi thứ hoạt động và sinh hoạt giải trí. Ngay cả riêng với những nhà tăng trưởng có kinh nghiệm tay nghề, kiến ​​trúc BLoC cắt giảm thời hạn thiết yếu để làm quen với một dự án công trình bất Động sản. Điều này đặc biệt quan trọng quan trọng khi thao tác với thời hạn ngặt nghèo và để tăng trưởng thương mại.

Vì kiến ​​trúc này giữ cho những phần của ứng dụng nhỏ và tách biệt, bạn hoàn toàn có thể thuận tiện và đơn thuần và giản dị kiểm tra từng khía cạnh của ứng dụng và biết đúng chuẩn 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 marketing thương mại của ứng dụng của bạn hoàn toàn có thể Dự kiến và nhất quán.

Bây giờ toàn bộ 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 ít về logic của nó.

Cách thức hoạt động và sinh hoạt giải trí của kiến ​​trúc BLoC

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

Sự kiện và hành vi là nguồn vào xuất hiện khi người tiêu dùng tương tác với giao diện người tiêu dùng: ví dụ: vuốt hoặc cuộn.Trạng thái là phản ứng riêng với những hành vi này và chúng thay đổi theo sự kiện mà người tiêu dùng khởi đầu bằng phương pháp tương tác với giao diện.Một khối là một thành phần nào phụ trách về logic marketing thương mại. Nó quy đổi những sự kiện thành những trạng thái và là thành phần 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 điệu tài liệu có giao diện người tiêu dùng (UI) và khối phản ứng.

Logic của kiến ​​trúc BLoC như sau: khi người tiêu dùng thực thi một hành vi bằng phương pháp tương tác với giao diện người tiêu dùng, thông tin về hành vi này sẽ tiến hành 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 phương pháp 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 triển khai ứ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 và sinh hoạt giải trí in như một mẫu sắp xếp hơn thế nữa những luồng tài liệu trong ứng dụng của bạn.

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

Bước 1: Thêm kiến ​​trúc BLoC vào dự án công trình bất Động sả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ông trình bất Động sản của tớ. Để thực thi 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 tớ. Chúc mừng! Bây giờ bạn có một gói Flutter sẽ tiến hành 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ốiBlocBuilderBlocProvider

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 những phụ thuộc. Hãy xem cách triển khai từng tiện ích con và sử dụng nó trong logic marketing thương mại 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 toàn bộ logic trách nhiệm. Để sử dụng nó, hãy mở rộng lớp Bloc và ghi đè những phương thức mapEventToState và initialState .

Trong mapEventToState , bạn sẽ cần xử lý những đối số đại diện thay mặt thay mặt cho những hành vi. Sau khi làm điều này, 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 sự kiện) async* switch (sự kiện) case CounterEvent.decrement: yield state – 1; break; case CounterEvent.increment: yield state + 1; break;

Như bạn hoàn toà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) tiếp theo này được trả về.

Nếu bạn muốn tùy chỉnh phản hồi, bạn hoàn toà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 những trạng thái mới bằng phương pháp xây dựng BLoC. Tiện ích con này hoàn toàn có thể được gọi nhiều lần và hoạt động và sinh hoạt giải trí in như một hiệu suất cao phản ứng với những thay đổi về trạng thái bằng phương pháp tạo những tiện ích con tiếp theo đó hiển thị dưới dạng những thành phần giao diện người tiêu dùng mới.

Để đã có được BLoC dưới dạng một widget duy nhất sẽ không còn thể truy vấn đượ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 hoàn toàn có thể thấy, bạn cần phục vụ một lớp Khối mở rộng trong đối số khối. Các phiên bản của những 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 thứ nhất là trạng thái đã được tạo trước đó trong phương thức InitialState .

Để tránh rò rỉ bộ nhớ, bạn tránh việc 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 còn thể đóng luồng trong lớp Khối. Lời khuyên của tôi là tạo một thành viên 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 và sinh hoạt giải trí như một phụ thuộc, nghĩa là nó hoàn toàn có thể phục vụ BLoC cho một số trong những 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 những khối mà tiếp theo này sẽ có được sẵn cho toàn bộ những tiện ích con trong cây con. Và chính bới BlocProvider xây dựng những khối, nó cũng hoàn toàn có thể đóng chúng.

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

Lưu ý rằng bạn cũng hoàn toàn có thể sử dụng BlocProvider để phục vụ 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 hoàn toàn có thể mở rộng kĩ 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 còn đóng khối vì nó không tạo ra nó.

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

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

bloc.add(YourEvent());

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

Như bạn hoàn toàn có thể thấy, việc thiết lập mẫu kiến ​​trúc BLoC của bạn rất thuận tiện và đơn thuần và giản dị 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 triển khai kiến ​​trúc ứng dụng Flutter của bạn. Thật thuận tiện và đơn thuần và giản dị để thiết lập và sử dụng, đồng thời giúp mã của bạn hoàn toàn có thể Dự kiến và dễ kiểm tra.

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

Tôi đề xuất kiến nghị kiến ​​trúc BLoC cho bất kỳ dự án công trình bất Động sản Flutter nào, vì nó giúp mã hoàn toàn có thể bảo dưỡng được và giúp bạn vô hiệu mã viết sẵn và mã spaghetti bằng phương pháp giữ cho từng phần của ứng dụng của bạn được tổ chức triển khai riêng không liên quan gì đến nhau và thuận tiện.

flutter app developmentflutterflutter frameworkflutter app developersflutter app development company

14 hữu ích 0 phản hồi 23k xem chia sẻ

Reply 0 0 Chia sẻ

Video Flutter bloc Hướng dẫn ?

Bạn vừa Read tài liệu Với Một số hướng dẫn một cách rõ ràng hơn về Review Flutter bloc Hướng dẫn tiên tiến và phát triển nhất

Share Link Download Flutter bloc Hướng dẫn miễn phí

Hero đang tìm một số trong những Chia Sẻ Link Cập nhật Flutter bloc Hướng dẫn Free.

Hỏi đáp vướng mắc về Flutter bloc Hướng dẫn

Nếu Ban sau khi đọc nội dung bài viết Flutter bloc Hướng dẫn , bạn vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Tác giả lý giải và hướng dẫn lại nha #Flutter #bloc #Hướng #dẫn