mydomain
No ADS
No ADS

FlutterArtist Deferring External Shelf Events (Ex1)

  1. Cấu trúc ví dụ
  2. openEndDrawerAndDeferExternalShelfEventsUntilClosed
  3. openDrawerAndDeferExternalShelfEventsUntilClosed
  4. openDialogAndDeferExternalShelfEventsUntilClosed
Trong FlutterArtist, khi bạn thêm mới, chỉnh sửa hoặc xóa một ITEM trên một Block, sự kiện này sẽ được thông báo đến các Block(s) và Scalar(s) thuộc những Shelf(s) khác, kích hoạt các phản ứng ngay sau đó như truy vấn lại dữ liệu.
Tuy nhiên, việc thực thi hàng loạt phản ứng thứ cấp này có thể gây tiêu tốn thời gian và tài nguyên mạng. Để tối ưu, FlutterArtist cho phép bạn trì hoãn (defer) sự kiện: các thông báo phát ra sẽ được tạm giữ và đưa vào danh sách chờ thay vì gửi đi ngay lập tức. Chỉ khi Dialog hoặc Drawer/EndDrawer nguồn được đóng lại, toàn bộ danh sách sự kiện này mới được gửi đi đồng thời đến các Block(s) và Scalar(s) liên quan để xử lý một lần duy nhất.
Lưu ý: Ví dụ minh họa trong bài viết này (Demo71a) là bản nâng cấp từ Demo27a (phiên bản chưa áp dụng cơ chế trì hoãn sự kiện). Bạn nên tham khảo bài viết về Demo27a theo liên kết dưới đây, vì kịch bản của ví dụ và nhiều khái niệm nền tảng sẽ không được nhắc lại trong nội dung này.
Demo71a:
No ADS
Demo71b:
  • Download FlutterArtist Demo

1. Cấu trúc ví dụ

2. openEndDrawerAndDeferExternalShelfEventsUntilClosed

Để trì hoãn (defer) sự kiện khi một EndDrawer đang mở, bạn cần sử dụng phương thức openEndDrawerAndDeferExternalShelfEventsUntilClosed(). Phương thức này sẽ mở EndDrawer, đồng thời thiết lập cơ chế tạm hoãn các sự kiện từ bên ngoài Shelf (ExternalShelfEvent).
openEndDrawerAndDeferExternalShelfEventsUntilClosed()
FlutterArtist.storage
    .openEndDrawerAndDeferExternalShelfEventsUntilClosed(context);
Lưu ý quan trọng: Để cơ chế này hoạt động, điều kiện cần là bạn phải chủ động cập nhật trạng thái của Drawer và EndDrawer với hệ thống FlutterArtist thông qua hai thuộc tính onDrawerChanged và onEndDrawerChanged của Scaffold.
Scaffold
Scaffold(
  onEndDrawerChanged: (bool isOpened) {
      // IMPORTANT:
      FlutterArtist.storage.endDrawer.updateStatus(opened: isOpened);
  },
  onDrawerChanged: (bool isOpened) {
      // IMPORTANT:
      FlutterArtist.storage.drawer.updateStatus(opened: isOpened);
  },
  // ... Other Scaffold properties
);
No ADS
Trong trường hợp bạn sử dụng thư viện flutter_artist_face, hãy cập nhật trạng thái của Drawer và EndDrawer bằng cách ghi đè (override) hai phương thức trừu tượng onDrawerChanged() và onEndDrawerChanged().
MyFaceScreen
abstract class MyFaceScreen extends FaceScreen {
  const MyFaceScreen({super.key}); 

  @override
  void onDrawerChanged(bool isOpened) {
    // IMPORTANT:
    FlutterArtist.storage.drawer.updateStatus(opened: isOpened);
  }

  @override
  void onEndDrawerChanged(bool isOpened) {
    // IMPORTANT:
    FlutterArtist.storage.endDrawer.updateStatus(opened: isOpened);
  }
}
Quay trở lại với ví dụ được đề cập ở đầu bài viết, đây là code xử lý khi người dùng nhấn vào nút "Edit Supplier":
_onPressEditSupplierBtn()
Future<void> _onPressEditSupplierBtn(BuildContext context) async {
  FlutterArtist.codeFlowLogger.addMethodCall(
    ownerClassInstance: this,
    currentStackTrace: StackTrace.current,
    parameters: null,
  );
  //
  SupplierInfo? supplierInfo = block.currentItem;
  if (supplierInfo == null) {
    return;
  }
  Coordinator coordinator = SingleSupplierEditCoordinator(
    supplierId: supplierInfo.id,
    config: CoordinatorConfig(),
    customNavigate: (BuildContext context, bool success) {
      if (success) {
        FlutterArtist.storage
            .openEndDrawerAndDeferExternalShelfEventsUntilClosed(context);
      }
    },
  );
  await coordinator.execute(context);
}
No ADS
Và code xử lý khi người dùng nhấn vào nút "Create Supplier":
_onPressCreateSupplierBtn()
Future<void> _onPressCreateSupplierBtn(BuildContext context) async {
  FlutterArtist.codeFlowLogger.addMethodCall(
    ownerClassInstance: this,
    currentStackTrace: StackTrace.current,
    parameters: null,
  );
  //
  Coordinator coordinator = SingleSupplierCreationCoordinator(
    config: CoordinatorConfig(),
    customNavigate: (BuildContext context, bool success) {
      if (success) {
        FlutterArtist.storage
            .openEndDrawerAndDeferExternalShelfEventsUntilClosed(context);
      }
    },
  );
  await coordinator.execute(context);
}

3. openDrawerAndDeferExternalShelfEventsUntilClosed

Phương thức openDrawerAndDeferExternalShelfEventsUntilClosed() tương tự với openEndDrawerAndDeferExternalShelfEventsUntilClosed(), sự khác biệt là nó mở ra một Drawer thay vì một EndDrawer.

4. openDialogAndDeferExternalShelfEventsUntilClosed

Để trì hoãn (defer) sự kiện khi một Dialog đang mở, bạn cần sử dụng phương thức openDialogAndDeferExternalShelfEventsUntilClosed(). Phương thức này sẽ mở một Dialog, đồng thời thiết lập cơ chế tạm hoãn các sự kiện từ bên ngoài Shelf (ExternalShelfEvent).
openDialogAndDeferExternalShelfEventsUntilClosed()
Future<DialogDeferralResult<V?>>
    openDialogAndDeferExternalShelfEventsUntilClosed<V>({
  required Future<V?> Function() openDialog,
})
Demo71b là ví dụ minh họa cho phương thức openDialogAndDeferExternalShelfEventsUntilClosed(). Quan sát hình ảnh động bên trên, bạn sẽ thấy khi người dùng nhấn nút "Create Supplier", một Dialog chứa biểu mẫu (Form) tạo mới Supplier sẽ hiện ra.
Tại đây, người dùng thực hiện liên tiếp các thao tác: tạo mới, lưu lại, rồi tiếp tục chỉnh sửa và lưu lại một lần nữa. Toàn bộ quá trình này không làm danh sách bên dưới thay đổi ngay lập tức. Chỉ sau khi Dialog được đóng lại, danh sách Supplier(s) mới thực hiện truy vấn để cập nhật dữ liệu một lần duy nhất.
No ADS
No ADS

FlutterArtist

Show More
No ADS
No ADS

Newest Articles

Show More
No ADS