Flutter SDKでオンボーディングを表示する

オンボーディングは SDK v4 で非推奨となり、将来のリリースで削除される予定です。 バグ修正や改善は行われません。代わりにフローを使用してください。オンボーディングが WebView 内で動作するのとは異なり、フローはデバイス上でネイティブにレンダリングされるため、スムーズなアニメーション、一貫したネイティブの外観、高速な読み込み、そして WebView ランタイムへの依存がありません。開始するにはフローとペイウォールの取得およびフローとペイウォールの表示を参照してください。

ビルダーを使用してオンボーディングをカスタマイズした場合、Flutterアプリのコードでレンダリングする必要はありません。そのようなオンボーディングには、表示する内容と表示方法の両方が含まれています。

始める前に、以下を確認してください：

Adapty Flutter SDK 3.8.0以降をインストールしていること。
オンボーディングを作成していること。
オンボーディングをプレースメントに追加していること。

Adapty Flutter SDKには、オンボーディングを表示する方法が2つあります：

スタンドアロン画面
埋め込みウィジェット

スタンドアロンスクリーンとして表示する

オンボーディングをスタンドアロンスクリーンとして表示するには、createOnboardingView メソッドで作成した onboardingView に対して onboardingView.present() メソッドを呼び出します。各 view は一度しか使用できません。オンボーディングを再度表示する必要がある場合は、createOnboardingView をもう一度呼び出して新しい onboardingView インスタンスを作成してください。

同じ onboardingView を再作成せずに再利用すると、AdaptyUIError.viewAlreadyPresented エラーが発生する場合があります。

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

オンボーディングを閉じる

プログラムでオンボーディングを閉じる必要がある場合は、dismiss() メソッドを使用します：

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

iOS の表示スタイルを設定する

present() メソッドに iosPresentationStyle パラメータを渡すことで、iOS でのオンボーディングの表示方法を設定できます。このパラメータには AdaptyUIIOSPresentationStyle.fullScreen（デフォルト）または AdaptyUIIOSPresentationStyle.pageSheet を指定できます。

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

既存のウィジェットツリーにオンボーディングを埋め込むには、Flutterのウィジェット階層にAdaptyUIOnboardingPlatformViewウィジェットを直接使用します。

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

Android のプラットフォームビューを動作させるには、MainActivity が FlutterFragmentActivity を継承していることを確認してください:

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

オンボーディング中のローダー

オンボーディングを表示する際、スプラッシュ画面とオンボーディングの間に、基盤となるビューの初期化中に短いローディング画面が表示されることがあります。これはニーズに応じてさまざまな方法で対処できます。

onDidFinishLoading を使用したスプラッシュ画面の制御

このアプローチは、オンボーディングをウィジェットとして埋め込む場合にのみ使用できます。スタンドアロン画面として表示する場合は使用できません。

推奨されるクロスプラットフォームのアプローチは、オンボーディングが完全に読み込まれるまでスプラッシュスクリーンやカスタムオーバーレイを表示したままにしておき、その後手動で非表示にすることです。

埋め込みウィジェットを使用する場合は、その上に独自のウィジェットをオーバーレイし、onDidFinishLoading が発火したタイミングでオーバーレイを非表示にします:

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

ネイティブローダーをカスタマイズする

このアプローチはプラットフォーム固有であり、ネイティブ UI コードのメンテナンスが必要です。アプリで既に別のネイティブレイヤーをメンテナンスしている場合を除き、推奨しません。

デフォルトのローダー自体をカスタマイズしたい場合は、プラットフォーム固有のレイアウトに置き換えることができます。このアプローチでは、Android と iOS それぞれに個別の実装が必要です：

iOS: Xcode プロジェクトに AdaptyOnboardingPlaceholderView.xib を追加する
Android: res/layout に adapty_onboarding_placeholder_view.xml を作成し、プレースホルダーを定義する

オンボーディング内リンクの開き方をカスタマイズする

オンボーディング内リンクの開き方のカスタマイズは、Adapty SDK v3.15.1 以降でサポートされています。

デフォルトでは、オンボーディング内のリンクはアプリ内ブラウザで開きます。これにより、ユーザーがアプリを切り替えることなく Web ページを閲覧できるシームレスな体験が提供されます。

外部ブラウザでリンクを開くように変更したい場合は、externalUrlsPresentation パラメータを 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) {
  },
)

セーフエリアのパディングを無効にする（Android）

デフォルトでは、Androidデバイスにおいて、オンボーディングビューはステータスバーやナビゲーションバーなどのシステムUI要素を避けるため、セーフエリアのパディングを自動的に適用します。ただし、この動作を無効にしてレイアウトを完全に制御したい場合は、アプリにboolean型のリソースを追加することで対応できます。

android/app/src/main/res/values に移動します。bools.xml ファイルが存在しない場合は、新規作成してください。
以下のリソースを追加します。

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

変更はアプリ内のすべてのオンボーディングにグローバルに適用されます。

Flutter SDKでオンボーディングを表示する

スタンドアロンスクリーンとして表示する

オンボーディングを閉じる

iOS の表示スタイルを設定する

ウィジェット階層への埋め込み

オンボーディング中のローダー

onDidFinishLoading を使用したスプラッシュ画面の制御

ネイティブローダーをカスタマイズする

オンボーディング内リンクの開き方をカスタマイズする

セーフエリアのパディングを無効にする（Android）