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

Mostrar flows y paywalls - Flutter

Si has diseñado un flow o paywall con el Flow Builder o el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Ese flow o paywall ya incluye tanto qué mostrar como cómo mostrarlo.

Esta guía es para flows y paywalls creados con Paywall Builder. Para presentar paywalls con Remote Config, consulta Renderizar un paywall diseñado con Remote Config.

El SDK de Flutter de Adapty ofrece dos formas de presentar flows y paywalls:

  • Pantalla independiente

  • Widget embebido

Presentar como pantalla independiente

Para mostrar un flow o paywall como pantalla independiente, usa el método view.present() en el view creado por el método createFlowView. Cada view solo puede presentarse una vez: después de cerrarlo, la vista se libera de la memoria. Si necesitas mostrar el flow o paywall de nuevo, llama a createFlowView otra vez para crear una nueva instancia de view.

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

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras apps de ejemplo, que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

Cerrar el flow o el paywall

Cuando necesites cerrar el flow o el paywall mediante código, usa el método dismiss():

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

Al cerrar una vista, esta se libera de la memoria y ya no puede volver a mostrarse. En su lugar, crea una nueva con createFlowView.

Mostrar diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se muestra un flow o una vista de paywall en Android. En Android, las alertas normales aparecen detrás de la vista, lo que las hace invisibles para los usuarios. Este método garantiza que el diálogo se muestre correctamente por encima del flow o el paywall en todas las plataformas.

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
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el flow o el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores AdaptyUIIOSPresentationStyle.fullScreen (predeterminado) o AdaptyUIIOSPresentationStyle.pageSheet.

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

Incorporar en la jerarquía de widgets

Para incorporar un flow o paywall dentro de tu árbol de widgets existente, usa el widget AdaptyUIFlowPlatformView directamente en tu jerarquía de widgets de 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) {
  },
)

Para que la vista de plataforma de Android funcione, asegúrate de que tu MainActivity extiende FlutterFragmentActivity:

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

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese tipo de paywall incluye tanto lo que debe mostrarse como la forma en que debe mostrarse.

Esta guía es solo para paywalls del nuevo Paywall Builder, que requieren SDK v3.2.0 o posterior. El proceso para presentar paywalls varía según la versión del Paywall Builder con la que se diseñaron y para los paywalls de Remote Config.

El SDK de Adapty para Flutter ofrece dos formas de presentar paywalls:

  • Pantalla independiente

  • Widget integrado

Presentar como pantalla independiente

Para mostrar un paywall como pantalla independiente, usa el método view.present() en la view creada por el método createPaywallView. Cada view solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a createPaywallView otra vez para crear una nueva instancia de view.

Reutilizar la misma view sin recrearla puede provocar un error AdaptyUIError.viewAlreadyPresented.

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

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras apps de ejemplo, que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

Cierra el paywall

Cuando necesites cerrar el paywall mediante código, usa el método dismiss():

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

Mostrar un diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando se muestra una vista de paywall en Android. En Android, las alertas normales aparecen detrás de la vista del paywall, lo que las hace invisibles para el usuario. Este método garantiza que el diálogo se muestre correctamente por encima del paywall en todas las plataformas.

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
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores AdaptyUIIOSPresentationStyle.fullScreen (por defecto) o AdaptyUIIOSPresentationStyle.pageSheet.

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

Insertar en la jerarquía de widgets

Para insertar un paywall dentro de tu árbol de widgets existente, utiliza el widget AdaptyUIPaywallPlatformView directamente en tu jerarquía de widgets de 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) {
  },
)

Para que la vista de plataforma Android funcione, asegúrate de que tu MainActivity extienda FlutterFragmentActivity:

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