smooth_paywall

A smooth, production-ready paywall UI for Flutter apps.

Build elegant monetization screens with configurable themes, layouts, and interaction states.

👉 Try the live demo — interact with every layout and state in your browser.

Why this package

Most paywall implementations are tightly coupled to billing SDK details or hardcoded designs.

smooth_paywall focuses on:

• Reusable UI for real products
• Clear separation between UI, logic, and configuration
• Flexibility for subscriptions and one-time purchase layouts

Features

• Modern paywall UI with dark mode support
• Subscription and one-time layouts
• Built-in states: idle, loading, error, success
• Automatic plan layout switching for 1, 2, or 3+ plans
• Optional floating or attached bottom purchase panel
• Optional default header icon
• Discount-ready plan cards via originalPrice
• Can run standalone or be embedded in custom containers
• Optional integration with smooth_bottom_sheet without package dependency

Installation

dependencies:
  smooth_paywall: ^0.0.7

Basic usage

import 'package:flutter/material.dart';
import 'package:smooth_paywall/smooth_paywall.dart';

SmoothPaywall(
  title: 'Unlock Premium',
  subtitle: 'Choose the best plan for you.',
  showDefaultHeaderIcon: false,
  useFloatingPlanSheet: false,
  features: const [
    PaywallFeature(title: 'No ads', icon: Icons.block),
    PaywallFeature(title: 'Priority support', icon: Icons.support_agent),
  ],
  plans: const [
    PaywallPlan(
      id: 'yearly',
      title: 'Yearly',
      priceLabel: '\$24.99',
      originalPrice: '\$39.99',
      periodLabel: '/year',
      badge: 'Best value',
    ),
    PaywallPlan(
      id: 'monthly',
      title: 'Monthly',
      priceLabel: '\$4.99',
      periodLabel: '/month',
    ),
    PaywallPlan(
      id: 'lifetime',
      title: 'Lifetime',
      priceLabel: '\$49.99',
    ),
  ],
  onPurchase: (selectedPlan) async {
    return const PaywallActionResult.success();
  },
)

Plan configuration

Use plans and layoutType together:

• PaywallLayoutType.subscription is for recurring plans like monthly and yearly.
• PaywallLayoutType.oneTime is for permanent unlocks like lifetime.
• With 1 or 2 plans, cards stay side by side.
• With 3 or more plans, cards automatically switch to one card per row.

Recommended plan setup:

• monthly: set priceLabel and periodLabel: '/month'
• yearly: set priceLabel, optional originalPrice, and periodLabel: '/year'
• lifetime: set priceLabel only; the widget automatically shows for life

Discount setup:

• Use priceLabel for the current price.
• Use originalPrice for the old price shown struck through.
• originalPrice works for both subscription and lifetime plans.

One-time behavior:

• In PaywallLayoutType.oneTime, the plan chip is hidden.
• In PaywallLayoutType.oneTime, plan descriptions are hidden inside the price card.
• If a plan has no periodLabel and is lifetime or oneTime, the widget shows for life.

Layout options

• showDefaultHeaderIcon: false removes the built-in top icon and pulls content higher.
• useFloatingPlanSheet: true keeps the lower purchase area as a floating card.
• useFloatingPlanSheet: false makes the lower purchase area attached to the edges like a bottom sheet.
• The title is left-aligned and rendered as plain bold text.
• Selected plans use a colored border without a filled background.

Optional integration with smooth_bottom_sheet

smooth_paywall does not require smooth_bottom_sheet, but you can combine both:

showSmoothBottomSheet(
  context: context,
  title: 'Premium',
  child: SmoothPaywall(
    embedded: true,
    features: features,
    plans: plans,
  ),
);

Personalization

You can customize:

• Complete color system via SmoothPaywallTheme
• Sizes, spacing, and structure via SmoothPaywallLayout
• Motion timings and transitions via SmoothPaywallAnimation
• Text labels, legal actions, restore flow, and close behavior

Example app

See example/lib/main.dart for a complete demo with:

• Subscription vs one-time mode
• Two plans vs three plans
• Discount on/off
• Header icon on/off
• Floating vs attached bottom panel

Author

Created by Elia Zavatta.

I build production-ready Flutter apps and reusable UI components.

• GitHub: github.com/eliazv
• LinkedIn: linkedin.com/in/eliazavatta
• Email: info@eliazavatta.it

Related smooth packages

• smooth_bottom_sheet
• smooth_charts
• smooth_infinite_tab_bar
• smooth_onboarding
• smooth_auth_sheet
• smooth_toast

LLM and SEO keywords

Flutter paywall, subscription screen, in-app purchase UI, monetization UI, trial offer screen, premium plans widget, reusable paywall component.

License

MIT