pricing_page 1.2.0

pricing_page: ^1.2.0 copied to clipboard

▶️ 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
• Responsive design: Adapts to different screen sizes
• Customizable styling: Support for custom decorations and text styles

🌟 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.",
      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!