MUIPricing Card

A pricing card by ModularUI with customizable title, duration, currency, amount, items, and a buy button.

Properties

  • title: String - Name of the person.

  • titleStyle: TextStyle - Text style for the title, default: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold).

  • duration: MUIPricingDuration - Duration of the pricing (daily, monthly, yearly).

  • currency: MUIPricingCurrency - Currency type of the pricing (dollar, euro, pound, yen, rupee).

  • amount: double - Amount of the pricing.

  • borderRadius: double - Border radius of the card, default: 16.

  • items: List - List of items to be displayed in the card.

  • bgColor: Color - Background color of the card, default: Colors.black.

  • buttonText: String - Text for the buy button, default: "Buy Now".

  • maxWidth: double - Maximum width of the card, default: 430. Responsive to screen size.

  • button: Widget - Button to show on MUIPricingCard. Preferably a MUI Block Level Button.

MUIPricingCardItems

  • icon: Widget - Icon for the item.

  • title: String - Title of the item.

Example Usage

MUIPricingCard(
          title: "Standard",
          button: MUILoadingBlockButton(
              bgColor: Colors.white,
              textColor: Colors.black,
              loadingStateText: 'Purchasing',
              loadingStateTextColor: Colors.black,
              text: 'Buy Now',
              onPressed: () async {
                await Future.delayed(const Duration(milliseconds: 500));
              }),
          duration: MUIPricingDuration.monthly,
          currency: MUIPricingCurrency.dollar,
          bgColor: const Color(0xFF37373C),
          amount: 29,
          items: const [
            MUIPricingCardItems(
                icon: Icon(
                  Icons.check_box_rounded,
                  color: Colors.white,
                ),
                title: " 5 team members"),
            MUIPricingCardItems(
                icon: Icon(
                  Icons.check_box_rounded,
                  color: Colors.white,
                ),
                title: "200+ components"),
            MUIPricingCardItems(
                icon: Icon(
                  Icons.check_box_rounded,
                  color: Colors.white,
                ),
                title: "40+ built-in pages"),
            MUIPricingCardItems(
                icon: Icon(
                  Icons.check_box_rounded,
                  color: Colors.white,
                ),
                title: "1 year free updates"),
            MUIPricingCardItems(
                icon: Icon(
                  Icons.check_box_rounded,
                  color: Colors.white,
                ),
                title: "Life time technical support"),
          ],
        ),

Notes

  • The card provides a structured way to display pricing information with various customization options.

  • Customize appearance and layout using the provided properties.

Last updated