slider_card_kit_commerce

A premium marketplace product card kit for Flutter. Scalable, modular, and designed for a professional aesthetic with deep customization support.

Read Detailed Documentation

---

Support the Project

If you find this library helpful and want to support its development, you can buy me a coffee!

---

Visual Showcase

Large Hero	Standard Grid	List View	Mini Carousel

---

Full Previews

Layout Showcase	Custom Color Palette

---

Table of Contents

• Features
• Getting Started
• API & Technical Reference (Full Documentation)
• Usage per Widget
  • CommerceCardLarge
  • CommerceCardStandard
  • CommerceCardList
  • CommerceCardMini
• Showcase Feature
• Theming & Customization
• Breaking Changes
• License

---

Features

• Modular Components: 4 distinct card variations tailored for different layout requirements.
• Unified Data Model: One source of truth (CommerceProductModel) for all widgets.
• Per-Instance Styling: Override colors for individual cards via CommerceCardStyle.
• Built-in Showcase: Access a complete preview system with CommerceShowcase.
• Pixel Perfect: Designed with an 8pt grid system and premium typography.

---

Getting Started

Add the dependency to your pubspec.yaml:

dependencies:
  slider_card_kit_commerce: ^1.0.0

---

Usage per Widget

Shared Data Model

All widgets utilize the same model for consistency:

final product = CommerceProductModel(
  id: '1',
  title: 'Premium Product Name',
  price: 199.00,
  imageWidget: Image.network('...'),
  onTap: () => print('Open Details'),
);

1. CommerceCardLarge

Ideal for Hero sections or featured banners.

CommerceCardLarge(
  product: product,
  style: CommerceCardStyle(primaryColor: Colors.deepPurple),
)

2. CommerceCardStandard

Optimized for 2-column Grid layouts. Common for catalog pages.

CommerceCardStandard(product: product)

3. CommerceCardList

Perfect for Vertical scrolling lists with horizontal item layouts.

CommerceCardList(product: product)

4. CommerceCardMini

Designed for Horizontal carousels and compact sliders.

CommerceCardMini(
  product: product,
  style: CommerceCardStyle(ratingColor: Colors.orange),
)

---

Showcase Feature

The library includes an internal showcase widget that you can use to preview all components in your own app during development.

import 'package:slider_card_kit_commerce/slider_card_kit_commerce.dart';

// Use it as a page or within a Navigator
return const CommerceShowcase();

---

Theming & Customization

CommerceCardStyle

You can inject specific styles into individual widgets for brand-specific layouts:

Property	Description
backgroundColor	Card container background.
primaryColor	Action button and accent color.
buttonTextColor	Text color within primary buttons.
titleColor	Product title text color.
priceColor	Product price text color.
ratingColor	Star rating icon color.

---

Breaking Changes

Version 1.0.0

• Flexible Image: imageWidget is now mandatory to support both Network and Asset images.
• Structure: Internal example moved to a dedicated CommerceShowcase widget.
• Layout: CommerceCardMini now supports flexible resizing to prevent overflow.

---

License

This project is licensed under the MIT License.