ÿÿ Hiển thị Flows & Paywalls trong Flutter | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Hiển thị flows & paywalls - Flutter

Nếu bạn đã thiết kế má»™t flow hoặc paywall bằng Flow Builder hoặc Paywall Builder, bạn không cần lo lắng vá» việc render nó trong code ứng dụng để hiển thị cho ngÆ°á»i dùng. Flow hoặc paywall nhÆ° vậy đã chứa cả ná»™i dung cần hiển thị lẫn cách hiển thị nó.

HÆ°á»›ng dẫn này dành cho flow và paywall được tạo bằng Paywall Builder. Äể hiển thị paywall Remote Config, xem Render paywall được thiết kế bằng Remote Config.

Adapty Flutter SDK cung cấp hai cách để hiển thị flow và paywall:

  • Màn hình Ä‘á»™c lập

  • Widget nhúng

Hiển thị dưới dạng màn hình độc lập

Äể hiển thị má»™t flow hoặc paywall dÆ°á»›i dạng màn hình Ä‘á»™c lập, hãy dùng phÆ°Æ¡ng thức view.present() trên view được tạo bởi phÆ°Æ¡ng thức createFlowView. Má»—i view chỉ có thể được hiển thị má»™t lần: sau khi bạn đóng nó, view sẽ được giải phóng khá»i bá»™ nhá»›. Nếu cần hiển thị lại flow hoặc paywall, hãy gá»i lại createFlowView má»™t lần nữa để tạo má»™t view má»›i.

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Muốn xem ví dụ thá»±c tế vá» cách tích hợp Adapty SDK vào ứng dụng di Ä‘á»™ng? Hãy xem ứng dụng mẫu của chúng tôi, nÆ¡i minh há»a toàn bá»™ quá trình thiết lập, bao gồm hiển thị paywall, thá»±c hiện mua hàng và các chức năng cÆ¡ bản khác.

Äóng flow hoặc paywall

Khi cần đóng flow hoặc paywall theo cách lập trình, hãy dùng phương thức dismiss():

try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Äóng má»™t view sẽ giải phóng nó khá»i bá»™ nhá»› — view đã đóng không thể hiển thị lại. Hãy tạo view má»›i bằng createFlowView thay thế.

Hiển thị hộp thoại

Dùng phÆ°Æ¡ng thức này thay cho các há»™p thoại alert thông thÆ°á»ng khi hiển thị flow hoặc paywall view trên Android. Trên Android, các alert thông thÆ°á»ng sẽ xuất hiện phía sau view, khiến ngÆ°á»i dùng không nhìn thấy. PhÆ°Æ¡ng thức này đảm bảo há»™p thoại luôn hiển thị đúng phía trên flow hoặc paywall trên má»i ná»n tảng.

try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}

Cấu hình kiểu trình bày trên iOS

Cấu hình cách flow hoặc paywall được hiển thị trên iOS bằng cách truyá»n tham số iosPresentationStyle vào phÆ°Æ¡ng thức present(). Tham số này chấp nhận các giá trị AdaptyUIIOSPresentationStyle.fullScreen (mặc định) hoặc AdaptyUIIOSPresentationStyle.pageSheet.

try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Nhúng vào cây widget

Äể nhúng má»™t flow hoặc paywall vào cây widget hiện có của bạn, hãy sá»­ dụng trá»±c tiếp widget AdaptyUIFlowPlatformView trong cây widget Flutter của bạn.

AdaptyUIFlowPlatformView(
  flow: flow, // The flow object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidReceiveError: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)

Äể Android platform view hoạt Ä‘á»™ng, hãy đảm bảo MainActivity của bạn kế thừa FlutterFragmentActivity:

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

Nếu bạn đã tùy chỉnh paywall bằng Paywall Builder, bạn không cần lo lắng vá» việc render nó trong code ứng dụng di Ä‘á»™ng để hiển thị cho ngÆ°á»i dùng. Paywall đó đã bao gồm cả ná»™i dung hiển thị lẫn cách thức hiển thị.

Hướng dẫn này chỉ áp dụng cho paywall Paywall Builder mới yêu cầu SDK v3.2.0 trở lên. Quy trình hiển thị paywall khác nhau tùy theo phiên bản Paywall Builder được sử dụng để thiết kế paywall và paywall Remote Config.

Adapty Flutter SDK cung cấp hai cách hiển thị paywall:

  • Màn hình Ä‘á»™c lập

  • Widget nhúng

Hiển thị dưới dạng màn hình độc lập

Äể hiển thị má»™t paywall dÆ°á»›i dạng màn hình Ä‘á»™c lập, hãy sá»­ dụng phÆ°Æ¡ng thức view.present() trên view được tạo bởi phÆ°Æ¡ng thức createPaywallView. Má»—i view chỉ có thể được sá»­ dụng má»™t lần. Nếu bạn cần hiển thị lại paywall, hãy gá»i createPaywallView thêm má»™t lần nữa để tạo instance view má»›i.

Việc tái sử dụng cùng một view mà không tạo lại có thể dẫn đến lỗi AdaptyUIError.viewAlreadyPresented.

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Muốn xem ví dụ thá»±c tế vá» cách tích hợp Adapty SDK vào ứng dụng di Ä‘á»™ng? Hãy xem ứng dụng mẫu của chúng tôi, nÆ¡i minh há»a toàn bá»™ quá trình thiết lập, bao gồm hiển thị paywall, thá»±c hiện mua hàng và các chức năng cÆ¡ bản khác.

Äóng paywall

Khi cần đóng paywall theo chương trình, sử dụng phương thức dismiss():

try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Hiển thị hộp thoại

Dùng phÆ°Æ¡ng thức này thay cho há»™p thoại cảnh báo gốc khi paywall view Ä‘ang được hiển thị trên Android. Trên Android, các alert thông thÆ°á»ng sẽ xuất hiện phía sau paywall view, khiến ngÆ°á»i dùng không thể nhìn thấy. PhÆ°Æ¡ng thức này đảm bảo há»™p thoại luôn hiển thị đúng vị trí phía trên paywall trên má»i ná»n tảng.

try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}

Cấu hình kiểu trình bày trên iOS

Cấu hình cách paywall được hiển thị trên iOS bằng cách truyá»n tham số iosPresentationStyle vào phÆ°Æ¡ng thức present(). Tham số này nhận giá trị AdaptyUIIOSPresentationStyle.fullScreen (mặc định) hoặc AdaptyUIIOSPresentationStyle.pageSheet.

try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Nhúng vào cây widget

Äể nhúng paywall vào cây widget hiện có của bạn, hãy sá»­ dụng widget AdaptyUIPaywallPlatformView trá»±c tiếp trong cây widget Flutter của bạn.

AdaptyUIPaywallPlatformView(
  paywall: paywall, // The paywall object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidFailRendering: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)

Äể Android platform view hoạt Ä‘á»™ng, hãy đảm bảo MainActivity của bạn extends FlutterFragmentActivity:

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
ÿÿÿÿ