Description:

flutter product card

flutter_product_card #

flutter_product_card is a highly customizable and feature-rich Flutter package for displaying product cards in e-commerce or shopping applications. With this package, you can easily create visually appealing product cards with various customization options.
Features #

Customizable card design with options for border radius, background color, and text color.
Displays product image, name, category, description (optional), rating (optional), and price.
Shows product availability status with icons and labels.
Displays discount percentage (optional).
Favorite button to mark products as favorites.
Tap callback for handling card tap events.
Error handling for image loading with a placeholder.
Extracted UI components for better code organization and reusability.
Comprehensive documentation with examples.

Getting started- Installation #
To use this package, add flutter_product_card as a dependency in your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
flutter_product_card: ^0.0.2
copied to clipboard
Then, run flutter pub get to install the package.
Usage #
Import the package in your Dart file:
import 'package:flutter_product_card/flutter_product_card.dart';
copied to clipboard
Then, use the ProductCard widget in your application:
ProductCard(
imageUrl:
//add your image url here
'https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcQndSK7hvssofrM2uzv75NxVjrkAwH3RwyqWcBesUsmq1ipmkuljRr6x_SRbCKaBXvjTR9CKfAaEFtmUFw-69o52wgVMgk2hp8KDYr4FvKtQ8ZfKewgOW4gDQ&usqp=CAE4',
categoryName: 'Pants',
productName: 'Men Linen Pants',
price: 199.99,
currency: '\$', // Default is '$'
onTap: () {
// Handle card tap event
},
onFavoritePressed: () {
// Handle favorite button press
},
shortDescription:
'comfortable & airy.', // Optional short description
rating: 4.2, // Optional rating
discountPercentage: 35.0, // Optional discount percentage
isAvailable: true, // Optional availability status
cardColor: Colors.white, // Optional card background color
textColor: Colors.black, // Optional text color
borderRadius: 8.0, // Optional border radius
)
copied to clipboard
Customization #
The ProductCard widget offers various properties to customize its appearance and behavior:

imageUrl: (String) The URL of the product image.
categoryName: (String) The category name of the product.
productName: (String) The name of the product.
price: (double) The price of the product.
currency: (String, optional) The currency symbol to display with the price (defaults to '$').
shortDescription: (String, optional) A short description of the product.
onTap: (VoidCallback, optional) A callback function triggered when the card is tapped.
onFavoritePressed: (VoidCallback, optional) A callback function triggered when the favorite icon is pressed.
isAvailable: (bool, optional) A flag indicating whether the product is available (defaults to true).
textColor: (Color, optional) The color used for text labels and descriptions (defaults to black).
discountPercentage: (double, optional) A value representing the discount percentage for the product (displays a discounted price).
rating: (double, optional) The product rating.

Additional information #
Example #
For more detailed usage examples, please refer to the example folder in the package repository.
class MainApp extends StatelessWidget {
const MainApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
height: 400,
width: 300,
child: ProductCard(
imageUrl:
'https://shorturl.at/oxA34',
categoryName: 'Pants',
productName: 'Men Linen Pants',
price: 199.99,
currency: '\$', // Default is '$'
onTap: () {
// Handle card tap event
},
onFavoritePressed: () {
// Handle favorite button press
},
shortDescription:
'comfortable & airy.', // Optional short description
rating: 4.2, // Optional rating
discountPercentage: 35.0, // Optional discount percentage
isAvailable: true, // Optional availability status
cardColor: Colors.white, // Optional card background color
textColor: Colors.black, // Optional text color
borderRadius: 8.0, // Optional border radius
),
),
),
),
);
}
}
copied to clipboard
Output #





Contributing #
Contributions are welcome! If you encounter any issues or have suggestions for improvements (eg. documentation improvement), please open an issue or submit a pull request on the GitHub repository.
Author #
This package is created and maintained by Krishna Gupta.
Contact #
If you want to connect or have any questions or need further assistance, feel free to reach out:

Email: e[dot]krishnagupta[at]gmail[dot]com
LinkedIn: @iamkrishnagupta
Twitter: @krishnagtwts

License #
This package is released under the MIT License.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter