English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

Afficher les flows & paywalls - Flutter

Si vous avez conçu un flow ou un paywall avec le Flow Builder ou le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et comment cela doit l’être.

Ce guide concerne les flows et les paywalls créés avec le Paywall Builder. Pour afficher des paywalls Remote Config, consultez Afficher un paywall conçu avec la Remote Config.

Le SDK Flutter d’Adapty propose deux façons d’afficher les flows et les paywalls :

  • Écran autonome

  • Widget intégré

Afficher en tant qu’écran autonome

Pour afficher un flow ou un paywall en tant qu’écran autonome, utilisez la méthode view.present() sur la view créée par la méthode createFlowView. Chaque view ne peut être présentée qu’une seule fois : une fois fermée, la vue est libérée de la mémoire. Si vous devez afficher à nouveau le flow ou le paywall, appelez createFlowView une nouvelle fois pour créer une nouvelle instance de view.

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

Vous souhaitez voir un exemple concret d’intégration du SDK Adapty dans une application mobile ? Consultez nos exemples d’applications, qui illustrent la configuration complète, notamment l’affichage des paywalls, les achats et d’autres fonctionnalités de base.

Fermer le flow ou le paywall

Quand vous devez fermer un flow ou un paywall par programmation, utilisez la méthode dismiss() :

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

Fermer une vue la libère de la mémoire — une vue fermée ne peut plus être réaffichée. Créez-en une nouvelle avec createFlowView à la place.

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue d’alerte natives lorsqu’un flow ou une vue paywall est affiché sur Android. Sur Android, les alertes classiques apparaissent derrière la vue, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du flow ou du paywall sur toutes les plateformes.

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
}

Configurer le style de présentation iOS

Configurez la façon dont le flow ou le paywall est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Ce paramètre accepte les valeurs AdaptyUIIOSPresentationStyle.fullScreen (par défaut) ou AdaptyUIIOSPresentationStyle.pageSheet.

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

Intégrer dans la hiérarchie de widgets

Pour intégrer un flow ou un paywall dans votre arbre de widgets existant, utilisez directement le widget AdaptyUIFlowPlatformView dans votre hiérarchie de widgets Flutter.

AdaptyUIFlowPlatformView(
  flow: flow, // The flow object you fetched
  locale: 'en', // The localization to render the flow with
  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) {
  },
)

Pour que la vue de la plateforme Android fonctionne, assurez-vous que votre MainActivity étend FlutterFragmentActivity :

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

Si vous avez personnalisé un paywall avec le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la manière dont cela doit l’être.

Ce guide concerne uniquement les paywalls créés avec le nouveau Paywall Builder, qui nécessitent SDK v3.2.0 ou une version ultérieure. Le processus de présentation des paywalls diffère selon la version du Paywall Builder utilisée et selon les paywalls de Remote Config.

Le SDK Flutter d’Adapty propose deux façons de présenter les paywalls :

  • Écran autonome

  • Widget intégré

Afficher comme écran autonome

Pour afficher un paywall comme écran autonome, utilisez la méthode view.present() sur le view créé par la méthode createPaywallView. Chaque view ne peut être utilisé qu’une seule fois. Si vous devez afficher le paywall à nouveau, appelez createPaywallView une nouvelle fois pour créer une nouvelle instance de view.

Réutiliser le même view sans le recréer peut entraîner une erreur AdaptyUIError.viewAlreadyPresented.

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

Vous souhaitez voir un exemple concret d’intégration du SDK Adapty dans une application mobile ? Consultez nos exemples d’applications, qui illustrent la configuration complète, notamment l’affichage des paywalls, les achats et d’autres fonctionnalités de base.

Fermer le paywall

Pour fermer le paywall par programmation, utilisez la méthode dismiss() :

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

Afficher une boîte de dialogue

Utilisez cette méthode à la place des boîtes de dialogue d’alerte natives lorsqu’une vue de paywall est affichée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue du paywall, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du paywall sur toutes les plateformes.

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
}

Configurer le style de présentation iOS

Configurez la façon dont le paywall est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Ce paramètre accepte les valeurs AdaptyUIIOSPresentationStyle.fullScreen (par défaut) ou AdaptyUIIOSPresentationStyle.pageSheet.

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

Intégrer dans la hiérarchie de widgets

Pour intégrer un paywall dans votre arborescence de widgets existante, utilisez le widget AdaptyUIPaywallPlatformView directement dans votre hiérarchie de widgets 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) {
  },
)

Pour que la vue de plateforme Android fonctionne, assurez-vous que votre MainActivity étend FlutterFragmentActivity :

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