English 中文TürkçeРусскийEspañol日本語Tiếng Việt

Отображение флоу и пейволов — Flutter

Если вы создали флоу или пейвол с помощью Flow Builder или Paywall Builder, вам не нужно беспокоиться о том, как отрисовать его в коде мобильного приложения для отображения пользователю. Такой флоу или пейвол содержит и то, что должно быть показано, и то, как это должно выглядеть.

Этот гайд предназначен для флоу и пейволов, созданных в Paywall Builder. Информацию о представлении пейволов на основе Remote Config см. в разделе Отрисовка пейвола, созданного через Remote Config.

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

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

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

Отображение как отдельного экрана

Чтобы отобразить флоу или пейвол как отдельный экран, вызовите метод view.present() на объекте view, созданном методом createFlowView. Каждый view можно показать только один раз: после закрытия он освобождается из памяти. Если нужно показать флоу или пейвол снова, вызовите createFlowView ещё раз, чтобы создать новый экземпляр view.

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

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

Закрытие флоу или пейвола

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

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

После закрытия вью освобождается из памяти — повторно отобразить его невозможно. Создайте новый с помощью createFlowView.

Показать диалог

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

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

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

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

Встраивание в иерархию виджетов

Чтобы встроить флоу или пейвол в существующее дерево виджетов, используйте виджет AdaptyUIFlowPlatformView напрямую в иерархии виджетов Flutter.

AdaptyUIFlowPlatformView(
  flow: flow, // The flow 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) {
  },
  onDidReceiveError: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)

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

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

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

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

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

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

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

Отображение как отдельного экрана

Чтобы отобразить пейвол как отдельный экран, вызовите метод view.present() на объекте view, созданном методом createPaywallView. Каждый view можно использовать только один раз. Если нужно показать пейвол повторно, снова вызовите createPaywallView, чтобы создать новый экземпляр view.

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

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

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

Закрытие пейвола

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

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

Показ диалога

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

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

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

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

Встраивание в иерархию виджетов

Чтобы встроить пейвол в существующее дерево виджетов, используйте виджет AdaptyUIPaywallPlatformView напрямую в иерархии виджетов 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) {
  },
)

Чтобы Android platform view работал корректно, убедитесь, что ваш MainActivity расширяет FlutterFragmentActivity:

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