Afficher les flows et paywalls - Flutter

Si vous avez créé un flow ou un paywall dans l’ancien 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 il doit l’être.

Le SDK Flutter d’Adapty propose deux façons de présenter 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 le view créé par la méthode createFlowView. Chaque view ne peut être affiché qu’une seule fois : une fois fermé, il est libéré de la mémoire. Si vous avez besoin d’afficher à nouveau le flow ou le paywall, appelez createFlowView une nouvelle fois pour créer une nouvelle instance de view, ou fermez-le sans le libérer à partir du SDK 4.1.

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

Fermer le flow ou le paywall

Quand vous avez besoin de fermer le flow ou 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
}

À partir du SDK 4.1, passez destroy: false pour conserver la vue en mémoire :

await view.dismiss(destroy: false);

Affichez à nouveau cette vue et l’utilisateur retrouve l’écran qu’il avait quitté, avec l’état que le flow avait construit. Une vue conservée de cette façon est maintenue jusqu’à ce que vous la supprimiez avec destroy: true.

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) {
  },
)

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.

L’Adapty Flutter SDK propose deux façons d’afficher 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.

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

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) {
  },
)

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