slider_card_kit_commerce 1.0.0

A premium marketplace product card kit for Flutter (scalable & modular). Supports multiple layout variations like Large, List, Mini, and Standard.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:slider_card_kit_commerce/slider_card_kit_commerce.dart';
import 'screens/layout_showcase_screen.dart';
import 'screens/storefront_slider_screen.dart';
import 'screens/all_products_grid_screen.dart';
import 'screens/product_list_screen.dart';
import 'screens/product_mini_screen.dart';
import 'screens/custom_color_screen.dart';

void main() {
  runApp(const CommerceExampleApp());
}

class CommerceExampleApp extends StatelessWidget {
  const CommerceExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Commerce Card Kit Example',
      theme: ThemeData(
        useMaterial3: true,
        primaryColor: CommerceTheme.primary,
        colorScheme: ColorScheme.fromSeed(seedColor: CommerceTheme.primary),
      ),
      home: const HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: CommerceTheme.background,
      appBar: AppBar(
        title: const Text('Commerce Component Kit'),
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(24.0),
        children: [
          _menuItem(
            context,
            title: 'Layout Showcase',
            subtitle: 'Preview all available card variations',
            icon: Icons.dashboard_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const LayoutShowcaseScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _menuItem(
            context,
            title: 'Storefront (Slider)',
            subtitle: 'Hero card and horizontal sliders',
            icon: Icons.storefront_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const StorefrontSliderScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _menuItem(
            context,
            title: 'Product Grid',
            subtitle: 'Standard cards in a 2-column grid',
            icon: Icons.grid_view_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const AllProductsGridScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _menuItem(
            context,
            title: 'Product List',
            subtitle: 'Horizontal cards in a vertical list',
            icon: Icons.list_alt_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const ProductListScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _menuItem(
            context,
            title: 'Product Mini',
            subtitle: 'Horizontal sliders and compact items',
            icon: Icons.view_carousel_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const ProductMiniScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _menuItem(
            context,
            title: 'Custom Color Showcase',
            subtitle: 'Override component colors with custom styles',
            icon: Icons.palette_outlined,
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const CustomColorScreen()),
            ),
          ),
        ],
      ),
    );
  }

  Widget _menuItem(
    BuildContext context, {
    required String title,
    required String subtitle,
    required IconData icon,
    required VoidCallback onTap,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: CommerceTheme.cardRadius,
        boxShadow: CommerceTheme.cardShadow,
      ),
      child: ListTile(
        contentPadding: const EdgeInsets.symmetric(
          horizontal: 20,
          vertical: 12,
        ),
        leading: Container(
          width: 48,
          height: 48,
          decoration: BoxDecoration(
            color: CommerceTheme.primary.withOpacity(0.1),
            shape: BoxShape.circle,
          ),
          child: Icon(icon, color: CommerceTheme.primary),
        ),
        title: Text(
          title,
          style: CommerceTheme.headline.copyWith(fontSize: 16),
        ),
        subtitle: Text(
          subtitle,
          style: CommerceTheme.bodyMedium.copyWith(fontSize: 12),
        ),
        trailing: const Icon(Icons.chevron_right, color: CommerceTheme.outline),
        onTap: onTap,
      ),
    );
  }
}