Hiển thị onboarding trong Flutter SDK

Nếu bạn đã tùy chỉnh một onboarding bằng builder, bạn không cần lo về việc render nó trong code Flutter để hiển thị cho người dùng. Onboarding đó đã chứa đầy đủ cả nội dung lẫn cách hiển thị.

Trước khi bắt đầu, hãy đảm bảo rằng:

1. Bạn đã cài đặt Adapty Flutter SDK 3.8.0 trở lên.
2. Bạn đã tạo một onboarding.
3. Bạn đã thêm onboarding vào một placement.

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

• 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 onboarding dưới dạng màn hình độc lập, sử dụng phương thức onboardingView.present() trên onboardingView được tạo bởi phương thức createOnboardingView. Mỗi view chỉ có thể được sử dụng một lần. Nếu bạn cần hiển thị onboarding lại, hãy gọi createOnboardingView thêm một lần nữa để tạo một instance onboardingView mới.

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

Đóng onboarding

Khi bạn cần đóng onboarding theo cách lập trình, hãy sử dụng phương thức dismiss():

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

Cấu hình kiểu hiển thị trên iOS

Cấu hình cách onboarding đượ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 giá trị AdaptyUIIOSPresentationStyle.fullScreen (mặc định) hoặc AdaptyUIIOSPresentationStyle.pageSheet.

try {
  await onboardingView.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 onboarding vào cây widget hiện có của bạn, hãy sử dụng widget AdaptyUIOnboardingPlatformView trực tiếp trong cây widget Flutter của bạn.

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding, // The onboarding object you fetched
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

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

Màn hình tải trong quá trình onboarding

Khi hiển thị onboarding, bạn có thể thấy một màn hình tải ngắn giữa màn hình splash và onboarding trong khi view bên dưới đang được khởi tạo. Bạn có thể xử lý điều này theo nhiều cách khác nhau tùy theo nhu cầu.

Kiểm soát màn hình splash bằng onDidFinishLoading

Cách được khuyến nghị cho đa nền tảng là giữ màn hình splash hoặc lớp phủ tùy chỉnh hiển thị cho đến khi onboarding tải xong, rồi ẩn nó đi theo cách thủ công.

Khi dùng embedded widget, đặt widget của bạn phủ lên trên và ẩn lớp phủ đó khi onDidFinishLoading được kích hoạt:

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  onDidFinishLoading: (meta) {
    // Hide your custom splash screen or overlay here
  },
  // ... other callbacks
)

Tùy chỉnh loader mặc định

Nếu bạn cần tùy chỉnh loader mặc định, bạn có thể thay thế nó bằng các layout theo từng nền tảng. Cách này yêu cầu triển khai riêng cho Android và iOS:

• iOS: Thêm AdaptyOnboardingPlaceholderView.xib vào dự án Xcode của bạn
• Android: Tạo adapty_onboarding_placeholder_view.xml trong res/layout và định nghĩa một placeholder ở đó

Tùy chỉnh cách mở liên kết trong onboarding

Theo mặc định, các liên kết trong onboarding sẽ mở trong trình duyệt trong ứng dụng. Điều này mang lại trải nghiệm liền mạch cho người dùng bằng cách hiển thị trang web ngay trong ứng dụng, không cần chuyển sang ứng dụng khác.

Nếu bạn muốn mở liên kết trong trình duyệt ngoài, có thể tùy chỉnh hành vi này bằng cách đặt tham số externalUrlsPresentation thành AdaptyWebPresentation.externalBrowser:

final onboardingView = await AdaptyUI().createOnboardingView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
);

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

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

Tắt safe area paddings (Android)

Theo mặc định, trên các thiết bị Android, màn hình onboarding sẽ tự động áp dụng safe area paddings để tránh các thành phần giao diện hệ thống như thanh trạng thái và thanh điều hướng. Tuy nhiên, nếu bạn muốn tắt hành vi này và kiểm soát hoàn toàn bố cục, bạn có thể thực hiện bằng cách thêm một boolean resource vào ứng dụng:

1. Truy cập vào android/app/src/main/res/values. Nếu chưa có file bools.xml, hãy tạo mới.

2. Thêm resource sau:

<resources>
    <bool name="adapty_onboarding_enable_safe_area_paddings">false</bool>
</resources>

Lưu ý rằng các thay đổi này áp dụng toàn cục cho tất cả các onboarding trong ứng dụng của bạn.