Hiển thị flows & paywalls - Flutter

Nếu bạn đã tạo một flow, hoặc một paywall trong Paywall Builder cũ, 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ị.

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, sử 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 bạn cần hiển thị lại flow hoặc paywall, hãy gọi createFlowView thêm một lần nữa để tạo một view instance mới, hoặc đóng mà không giải phóng nó trên SDK 4.1 trở lên.

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

Đó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
}

Từ SDK 4.1 trở đi, truyền destroy: false để giữ view trong bộ nhớ thay vì xóa đi:

await view.dismiss(destroy: false);

Hiển thị lại view đó và người dùng quay trở lại màn hình họ đã rời khỏi, với trạng thái mà flow đã tích lũy. Một view được giữ theo cách này sẽ tồn tại cho đến khi bạn dismiss nó với destroy: true.

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
  locale: 'en', // The localization to render the flow with
  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) {
  },
)

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ị.

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.

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

Đó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) {
  },
)

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