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 onMUIPricingCard
. 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