pricing_page 1.0.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 ui charging your customers.

🌟 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) {},
        ),
        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) {},
        ),
        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) {},
        ),
      ],
    ),
  ),
)