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

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Pricing Card

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.