pricing_page 1.3.0

A pre-made custom pricing page component. Easy for quick-setup of a ui charging your customers.

▶️ Pricing page:

A pre-made custom pricing page component. Easy for quick-setup of a ui charging your customers.

✨ Features

• Built-in loading state management: The package automatically handles loading states for buttons
• Automatic UI feedback: Shows loading indicators and disables all buttons during async operations
• Fully responsive design: Beautiful mobile-optimized UI with auto-scrolling, desktop layout with flexible column sizing
• Flexible desktop layout: Choose between equal-height columns or independent sizing based on content
• Customizable styling: Support for custom decorations and text styles
• Modern UI/UX: Polished design with improved spacing, typography, shadows, and interactive elements

🌟 Test the live demo!

Test the package in a online web demo:
https://go-babel.github.io/pricing_page/

Code implementation:

💡 Note:

This package have support for customizing the text style via babel_text package. Check documentation for macking bold text style, italic etc...

Scaffold(
  backgroundColor: const Color.fromARGB(255, 224, 240, 255),
  body: PricingBackground(
    child: PricingPage(
      width: 832,
      childAspectRatio: 0.7,
      subtitle:
          "We have you covered, whether you're an unique person running\na side-project, a startup or even an enterprise company.",
      // Optional: Force all columns to have the same height on desktop
      forceAllColumnsToHaveSameSizeInDesktop: false,
      decorationMapper: (decoration) {
        return decoration.copyWith(
          color: Theme.of(context).colorScheme.onSecondary,
        );
      },
      pricesList: [
        PricesModel(
          title: 'BASE',
          subTitle: 'SIDE-PROJECTS',
          monthlyPrice: 80,
          yearlyPrice: 850,
          advantagesListage: [
            '<b><u><tC>2<tC><u><b> projects',
            '<b><u><tC>4<tC><u><b> languages',
            '<b><u><tC>1<tC><u><b> account',
          ],
          onTap: (bool isYearly) async {
            // Your async logic here (e.g., API calls, navigation)
            await Future.delayed(Duration(seconds: 2));
          },
        ),
        PricesModel(
          title: 'PRO',
          subTitle: 'FOR STARTUP',
          emphasisText: 'MOST POPULAR',
          monthlyPrice: 99,
          yearlyPrice: 999,
          advantagesListage: [
            '<b><u><tC>10<tC><u><b> projects',
            '<b><u><tC>10<tC><u><b> languages',
            '<b><u><tC>5<tC><u><b> accounts',
          ],
          onTap: (bool isYearly) async {
            // Your async logic here (e.g., API calls, navigation)
            await Future.delayed(Duration(seconds: 2));
          },
        ),
        PricesModel(
          title: 'UNLIMITED',
          subTitle: 'ENTERPRISE',
          monthlyPrice: 250,
          yearlyPrice: 2500,
          advantagesListage: [
            '<b><u><tC>Unlimited<tC><u><b> projects',
            '<b><u><tC>Unlimited<tC><u><b> languages',
            '<b><u><tC>Unlimited<tC><u><b> accounts',
          ],
          onTap: (bool isYearly) async {
            // Your async logic here (e.g., API calls, navigation)
            await Future.delayed(Duration(seconds: 2));
          },
        ),
      ],
    ),
  ),
)

📌 Important Notes

Loading State Management

The package automatically handles loading states when buttons are pressed:

• When a button is clicked, it shows a loading indicator
• The clicked button turns grey during loading
• All other buttons are disabled to prevent multiple simultaneous actions
• Once the async operation completes, buttons return to normal state

You don't need to manage any loading state yourself - just provide an async function to onTap and the package handles the rest!

Desktop Layout Options

Control how pricing cards are displayed on desktop with the forceAllColumnsToHaveSameSizeInDesktop parameter:

false (default) - Cards size independently based on their content:

• Each card adjusts its height to fit its features
• Cards with fewer features are shorter
• More natural, content-driven layout
• Recommended for pricing tiers with significantly different feature counts

true - All cards match the height of the tallest card:

• Creates a uniform, aligned appearance
• All cards have equal height regardless of content
• Better visual symmetry
• Recommended when visual consistency is priority

Responsive Breakpoints

• Mobile (< 900px): Vertical scrollable layout with full-width cards
• Desktop (≥ 900px): Horizontal layout with side-by-side pricing cards