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

ビルダーでオンボーディングをカスタマイズした場合、Flutter アプリのコードでレンダリング処理を記述しなくても、ユーザーに表示できます。カスタマイズ済みのオンボーディングには、表示する内容と表示方法がすべて含まれています。

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

1. Adapty Flutter SDK 3.8.0 以降がインストールされていること。
2. オンボーディングが作成済みであること。
3. オンボーディングがプレースメントに追加済みであること。

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

• スタンドアロン画面

• 埋め込みウィジェット

スタンドアロン画面として表示する

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

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

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
)

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

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

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

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

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

外部ブラウザでリンクを開くようにしたい場合は、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 リソースを追加することで設定できます：

1. android/app/src/main/res/values に移動します。bools.xml ファイルが存在しない場合は作成します。

2. 以下のリソースを追加します：

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

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