---
title: "Flutter SDKでオンボーディングを表示する"
description: "コンバージョンを高めるためにオンボーディングを効果的に表示する方法を学びましょう。"
---

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

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

1. [Adapty Flutter SDK](sdk-installation-flutter) 3.8.0 以降がインストールされていること。
2. [オンボーディングが作成済み](create-onboarding)であること。
3. オンボーディングが[プレースメント](placements)に追加済みであること。

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

- **スタンドアロン画面**

- **埋め込みウィジェット**

## スタンドアロン画面として表示する \{#present-as-standalone-screen\}

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

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

```javascript showLineNumbers title="Flutter"
try {
  await onboardingView.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```

### オンボーディングを閉じる \{#dismiss-the-onboarding\}

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

```dart showLineNumbers title="Flutter"
try {
  await onboardingView.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```

### iOS の表示スタイルを設定する \{#configure-ios-presentation-style\}

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

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

## ウィジェットツリーに埋め込む \{#embed-in-widget-hierarchy\}

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

```javascript showLineNumbers title="Flutter"
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) {
  },
)
```

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

```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
```
:::

## オンボーディング中のローダー \{#loader-during-onboarding\}

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

#### onDidFinishLoading を使用してスプラッシュ画面を制御する \{#control-splash-screen-using-ondidfinishloading\}

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

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

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

```dart showLineNumbers title="Flutter"
AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  onDidFinishLoading: (meta) {
    // Hide your custom splash screen or overlay here
  },
  // ... other callbacks
)
```

### ネイティブローダーをカスタマイズする \{#customize-native-loader\}

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

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

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

## オンボーディング内のリンクの開き方をカスタマイズする \{#customize-how-links-open-in-onboardings\}

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

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

外部ブラウザでリンクを開くようにしたい場合は、`externalUrlsPresentation` パラメータを `AdaptyWebPresentation.externalBrowser` に設定することでこの動作をカスタマイズできます：

<Tabs>
<TabItem value="standalone" label="スタンドアロン画面" default>

```dart showLineNumbers title="Flutter"
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
}
```

</TabItem>
<TabItem value="embedded" label="埋め込みウィジェット">

```dart showLineNumbers title="Flutter"
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) {
  },
)
```

</TabItem>
</Tabs>

## セーフエリアのパディングを無効にする（Android） \{#disable-safe-area-paddings-android\}

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

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

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

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

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