How I structured 12 Flutter paywall screens to share the same purchase logic

I shipped a Flutter package today called . It's about 30 lines.

To get the adapter to each variant without passing it through every constructor, I use an InheritedWidget:

CODE Kopieren

class PaywallScope extends InheritedWidget {

  final PaywallAdapter adapter;

  // ...

  static PaywallScope of(BuildContext context) =>

      context.dependOnInheritedWidgetOfExactType<PaywallScope>()!;

}

{data-source-line="398"}

Inside a variant the call site looks like this:

CODE Kopieren

Future<void> _onContinue() async {

  final navigator = Navigator.of(context);

  final adapter = PaywallScope.of(context).adapter;

  final result = await adapter.buy(_selected);

  if (!mounted) return;

  navigator.pop(result);

}

{data-source-line="410"}

That's the variant's whole interaction with the purchase backend. It doesn't know whether adapter.buy is hitting Apple's StoreKit or RevenueCat or a Stripe webhook.

The button

The second piece is the primary CTA button. Every variant has one. Each one needs to disable itself and show a spinner while a purchase is pending. If I'd done that inside each variant, I'd have 12 copies of the same bool _busy = false boilerplate.

Instead the button takes a FutureOr<void> Function() and manages its own state:

CODE Kopieren

class PaywallPrimaryButton extends StatefulWidget {

  final FutureOr<void> Function() onPressed;

  // ...

}



class _PaywallPrimaryButtonState extends State<PaywallPrimaryButton> {

  bool _busy = false;



  Future<void> _handleTap() async {

    if (_busy) return;

    setState(() => _busy = true);

    try {

      await widget.onPressed();

    } finally {

      if (mounted) setState(() => _busy = false);

    }

  }



  // build() swaps the label for a CircularProgressIndicator when _busy is true

}

{data-source-line="441"}

Each variant just passes its CTA handler. The button takes care of the rest. Zero copies of the loading-state logic across the 12 variants.

What the consumer sees

After all that, calling the library is one line:

CODE Kopieren

final result = await PaywallKit.show(

  context,

  variant: PaywallVariant.lifetime,

  products: [monthly, annual, lifetime],

  copy: PaywallCopy(

    headline: 'Unlock everything',

    features: ['No ads', 'Cloud sync', 'AI assistant'],

  ),

  adapter: IapAdapter(),

);



switch (result) {

  case PaywallPurchased(:final product): grant(product);

  case PaywallRestored(:final products): restore(products);

  case PaywallDismissed(): break;

  case PaywallErrored(:final error): logError(error);

}

{data-source-line="467"}

PaywallResult is a sealed class so the switch is exhaustive (Dart 3). Swapping backends is one parameter.

The 12 variants

For reference, here's what I built and what each one is for:

Variant	Best for
carousel	Onboarding flows with swipeable feature highlights
comparison	Multi-tier offers (Free / Pro / Lifetime)
trialToggle	Subscriptions with a free-trial conversion play
lifetime	Indie-style one-time-purchase apps
soft	Non-blocking nudge with a "continue with limits" escape
hard	Onboarding-blocking, no skip
winback	Lapsed-subscriber re-engagement with discount
family	Family Sharing-compatible multi-seat tier
minimal	Pieter Levels aesthetic, single price, single CTA
storytelling	Long-scroll with testimonials and social proof
gamified	Reward-unlock framing with a progress ring
reverseTrial	"You're on Pro for 7 days" post-onboarding pattern

Try it

CODE Kopieren

dependencies:

  paywall_kit: ^0.1.0

{data-source-line="495"}

• pub.dev:
  


• Adapters recipe:
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen