---
title: "Flutter - Отображение пейволов, созданных в новом Paywall Builder"
description: "Отображайте пейволы во Flutter-приложениях с помощью монетизации Adapty."
---

Если вы создали пейвол в Paywall Builder, вам не нужно писать код для его отрисовки — пейвол уже содержит всё необходимое: что показывать и как показывать.

:::warning

Этот гайд предназначен только для **пейволов нового Paywall Builder**, которые требуют SDK версии 3.2.0 или выше. Процесс отображения пейволов различается в зависимости от версии Paywall Builder, с помощью которой они созданы, а также для пейволов на основе Remote Config.

- Для отображения **пейволов на основе Remote Config** см. [Отрисовка пейвола, созданного с помощью Remote Config](present-remote-config-paywalls).

:::

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

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

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

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

Чтобы отобразить пейвол как отдельный экран, вызовите метод `view.present()` на объекте `view`, созданном методом [`createPaywallView`](flutter-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder). Каждый объект `view` можно использовать только один раз. Если нужно показать пейвол повторно, снова вызовите `createPaywallView`, чтобы создать новый экземпляр `view`.

:::warning

Повторное использование одного и того же объекта `view` без его пересоздания может привести к ошибке `AdaptyUIError.viewAlreadyPresented`.
:::

```dart showLineNumbers title="Flutter"
try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
:::tip

Хотите увидеть реальный пример интеграции Adapty SDK в мобильное приложение? Посмотрите наши [примеры приложений](sample-apps) — они демонстрируют полную настройку: отображение пейволов, совершение покупок и другие базовые функции.

:::

### Закрытие пейвола \{#dismiss-the-paywall\}

Чтобы программно закрыть пейвол, используйте метод `dismiss()`:

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

### Показ диалога \{#show-dialog\}

Используйте этот метод вместо стандартных диалоговых окон, когда пейвол отображается на Android. На Android обычные диалоги появляются позади пейвола и остаются невидимыми для пользователей. Этот метод гарантирует корректное отображение диалога поверх пейвола на всех платформах.

```dart showLineNumbers title="Flutter"
try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}
```

### Настройка стиля отображения на iOS \{#configure-ios-presentation-style\}

Настройте способ отображения пейвола на iOS, передав параметр `iosPresentationStyle` в метод `present()`. Параметр принимает значения `AdaptyUIIOSPresentationStyle.fullScreen` (по умолчанию) или `AdaptyUIIOSPresentationStyle.pageSheet`.

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

## Встраивание в иерархию виджетов \{#embed-in-widget-hierarchy\}

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

```dart showLineNumbers title="Flutter"
AdaptyUIPaywallPlatformView(
  paywall: paywall, // The paywall object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidFailRendering: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)
```

:::note 
Чтобы платформенный вид работал на Android, убедитесь, что ваш `MainActivity` наследуется от `FlutterFragmentActivity`:

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