---
title: "Отображение онбордингов во Flutter SDK"
description: "Узнайте, как эффективно отображать онбординги для повышения конверсии."
---

Если вы настроили онбординг с помощью билдера, вам не нужно беспокоиться о том, как отрендерить его в коде Flutter-приложения для показа пользователю. Такой онбординг содержит всё необходимое: что именно показывать и как это показывать.

Перед началом убедитесь, что:

1. Установлен [Adapty Flutter SDK](sdk-installation-flutter) версии 3.8.0 или выше.
2. Вы [создали онбординг](create-onboarding).
3. Вы добавили онбординг в [плейсмент](placements).

Adapty Flutter SDK предоставляет два способа отображения онбордингов:

- **Отдельный экран**

- **Встроенный виджет**

## Отображение как отдельного экрана \{#present-as-standalone-screen\}

Чтобы показать онбординг как отдельный экран, вызовите метод `onboardingView.present()` на объекте `onboardingView`, созданном методом `createOnboardingView`. Каждый `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\}

Настройте способ отображения онбординга на iOS, передав параметр `iosPresentationStyle` в метод `present()`. Параметр принимает значения `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\}

Чтобы встроить онбординг в существующее дерево виджетов, используйте виджет `AdaptyUIOnboardingPlatformView` непосредственно в иерархии виджетов Flutter.

```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
Чтобы platform view работал на Android, убедитесь, что `MainActivity` наследует `FlutterFragmentActivity`:

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

## Загрузчик во время показа онбординга \{#loader-during-onboarding\}

При отображении онбординга вы можете заметить короткий экран загрузки между сплэш-экраном и онбордингом — пока инициализируется внутренний view. В зависимости от ваших потребностей это можно обработать по-разному.

#### Управление сплэш-экраном через 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**: добавьте `AdaptyOnboardingPlaceholderView.xib` в ваш Xcode-проект
- **Android**: создайте `adapty_onboarding_placeholder_view.xml` в `res/layout` и определите там заглушку

## Настройка открытия ссылок в онбордингах \{#customize-how-links-open-in-onboardings\}

:::important
Настройка открытия ссылок в онбордингах поддерживается начиная с Adapty SDK v.3.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 — строкой состояния и навигационной панелью. Если вы хотите отключить это поведение и полностью управлять макетом, добавьте булев ресурс в приложение:

1. Перейдите в `android/app/src/main/res/values`. Если файла `bools.xml` нет, создайте его.

2. Добавьте следующий ресурс:

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

Обратите внимание, что изменения применяются глобально для всех онбордингов в вашем приложении.