smooth_paywall 0.0.5

A modern, customizable paywall UI for Flutter apps with optional smooth_bottom_sheet integration.

smooth_paywall

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

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

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
• Accessibility-ready semantics on plans, features and CTA
• Configurable theme, spacing, typography and animation behavior
• Can run standalone or be embedded in custom containers
• Optional integration with smooth_bottom_sheet (without package dependency)

Installation

dependencies:
  smooth_paywall: ^0.0.4

Usage

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',
			badge: 'One-time',
			description: 'Pay once, keep Premium forever.',
		),
	],
	onPurchase: (selectedPlan) async {
		// Connect your billing flow and return action status.
		return const PaywallActionResult.success();
	},
)

When plans.length is 1 or 2, plans are displayed side by side. With 3 or more plans, the paywall automatically switches to a single-column stack for cleaner spacing and better readability. The title is left-aligned, and you can hide the default header icon with showDefaultHeaderIcon: false. Set useFloatingPlanSheet: false to switch the lower card from floating to an attached bottom-sheet style. In PaywallLayoutType.oneTime, badges and descriptions are hidden on the plan card and the price automatically shows for life when no periodLabel is provided. Use originalPrice to show a struck-through old price above the current discounted price.

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:

• Standalone full-screen paywall presentation
• Optional smooth_bottom_sheet wrapper
• Simulated success and error purchase states

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: [e-mail]

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