Flutter Advanced Cards #

The most powerful and customizable card widget for Flutter applications. Create stunning, professional cards with advanced features like image positioning, interactive overlays, content grids, rating systems, and sophisticated button controls.

✨ Features #

• 🎨 100+ Customizable Properties - Complete control over every aspect
• 🖼️ Advanced Image System - Multiple positioning options with overlay effects
• 📊 Content Grid Layouts - Perfect for metrics, analytics, and data display
• ⭐ Interactive Rating System - Customizable stars with tap-to-rate functionality
• 🔘 Professional Button System - 5 button styles with animations and loading states
• 💫 Micro-animations - Smooth hover effects and press animations
• 📱 Responsive Design - Adapts beautifully to all screen sizes
• 🎯 Production Ready - Used by thousands of developers worldwide

📸 Showcase #

🚀 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_advanced_cards: ^1.0.0

Then run:

flutter pub get

📱 Quick Start #

import 'package:flutter_advanced_cards/flutter_advanced_cards.dart';

AdvancedCard(
  title: 'Beautiful Card',
  description: 'This is a stunning card with advanced features',
  cardImage: 'https://example.com/image.jpg',
  imagePosition: ImagePosition.top,
  buttonText: 'Get Started',
  onButtonPressed: () {
    print('Button pressed!');
  },
)

🎯 Examples #

Course Card with Background Image #

AdvancedCard(
  fullWidth: true,
  height: 280,
  borderRadius: 20,
  cardImage: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f',
  imagePosition: ImagePosition.background,
  statusChips: [
    StatusChip(
      text: 'Live Workshop',
      position: ChipPosition.topRight,
      backgroundColor: Colors.red[600],
    ),
  ],
  title: 'Master Mobile Development',
  titleColor: Colors.white,
  titleFontSize: 24,
  titleFontWeight: FontWeight.w800,
  description: 'Learn Flutter & React Native from industry experts',
  descriptionColor: Colors.white.withOpacity(0.9),
  customChips: [
    ContentChip(
      text: '⚡ Beginner Friendly',
      backgroundColor: Colors.white.withOpacity(0.25),
      textColor: Colors.white,
    ),
    ContentChip(
      text: '🎓 Certificate',
      backgroundColor: Colors.white.withOpacity(0.25),
      textColor: Colors.white,
    ),
  ],
  chipPosition: ContentChipPosition.afterTitle,
  price: '\$89',
  priceFontSize: 28,
  priceColor: Colors.white,
  buttonText: 'Enroll Now',
  buttonIcon: Icons.play_arrow,
  buttonBackgroundColor: Colors.white,
  buttonTextColor: Colors.purple[800],
  onButtonPressed: () {
    // Handle enrollment
  },
)

Profile Card with Actions #

AdvancedCard(
  fullWidth: true,
  cardImage: 'https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7',
  imagePosition: ImagePosition.top,
  imageRatio: ImageRatio.oneThird,
  showBookmarkIcon: true,
  title: 'Sarah Chen',
  customChips: [
    ContentChip(
      text: 'Pro',
      backgroundColor: Colors.purple[600],
      textColor: Colors.white,
    ),
  ],
  chipPosition: ContentChipPosition.rightOfTitle,
  description: 'Senior UX Designer at Google • 8 years experience',
  iconTextPairs: [
    IconTextPair(
      icon: Icons.work_outline,
      text: 'Google',
    ),
    IconTextPair(
      icon: Icons.location_on_outlined,
      text: 'San Francisco',
    ),
  ],
  buttons: [
    CardButton(
      text: 'Connect',
      style: CardButtonStyle.elevated,
      backgroundColor: Colors.purple[600],
    ),
    CardButton(
      text: 'Portfolio',
      style: CardButtonStyle.outlined,
    ),
  ],
)

Analytics Dashboard Card #

AdvancedCard(
  backgroundColor: Colors.green[50],
  borderColor: Colors.green[100],
  title: 'Weekly Revenue',
  customChips: [
    ContentChip(
      text: '+12.5%',
      backgroundColor: Colors.green[100],
      textColor: Colors.green[700],
      prefixIcon: Icons.trending_up,
    ),
  ],
  metrics: [
    MetricItem(
      label: 'This Week',
      value: '\$24.8K',
      valueColor: Colors.green[700],
      valueFontWeight: FontWeight.w800,
    ),
    MetricItem(
      label: 'Last Week',
      value: '\$22.1K',
      valueColor: Colors.grey[600],
    ),
  ],
  metricsColumns: 1,
)

📚 Complete API Reference #

AdvancedCard Properties #

🏗️ Basic Structure

🎨 Border & Shadow

🖱️ Interaction

🖼️ Image System

💖 Interactive Overlays

📝 Content System

Title Properties:

Description Properties:

⭐ Rating System

🏷️ Chip System

📊 Metrics Grid

🔗 Icon-Text Pairs

💰 Price Display

🔘 Button System

Primary Button Properties:

Multiple Buttons:

📏 Layout

🎛️ Enums Reference #

ImagePosition

• ImagePosition.top - Image at the top of content
• ImagePosition.left - Image on the left side
• ImagePosition.right - Image on the right side
• ImagePosition.background - Image as background with overlay

ImageRatio

• ImageRatio.oneThird - 1/3 of available space
• ImageRatio.half - 1/2 of available space
• ImageRatio.twoThirds - 2/3 of available space
• ImageRatio.full - Full available space

OverlayPosition

• OverlayPosition.topLeft - Top-left corner
• OverlayPosition.topRight - Top-right corner
• OverlayPosition.bottomLeft - Bottom-left corner
• OverlayPosition.bottomRight - Bottom-right corner

ContentAlignment

• ContentAlignment.left - Left aligned
• ContentAlignment.center - Center aligned
• ContentAlignment.right - Right aligned

ContentChipPosition

• ContentChipPosition.beforeTitle - Above the title
• ContentChipPosition.afterTitle - Below the title
• ContentChipPosition.rightOfTitle - Right side of title (same line)

CardButtonStyle

• CardButtonStyle.elevated - Filled button with shadow
• CardButtonStyle.outlined - Border button
• CardButtonStyle.text - Text-only button
• CardButtonStyle.icon - Icon-only button
• CardButtonStyle.iconText - Icon + text button

ButtonPosition

• ButtonPosition.left - Left aligned
• ButtonPosition.center - Center aligned
• ButtonPosition.right - Right aligned
• ButtonPosition.fullWidth - Full width button

🛠️ Helper Classes #

StatusChip

StatusChip(
  text: 'Featured',
  position: ChipPosition.topRight,
  backgroundColor: Colors.orange,
  textColor: Colors.white,
  fontSize: 12,
  fontWeight: FontWeight.w600,
  borderRadius: 8,
)

ContentChip

ContentChip(
  text: 'Premium',
  backgroundColor: Colors.blue[100],
  textColor: Colors.blue[700],
  prefixIcon: Icons.star,
  iconColor: Colors.blue,
  fontSize: 12,
  borderRadius: 16,
  onTap: () {
    // Handle chip tap
  },
)

MetricItem

MetricItem(
  label: 'Revenue',
  value: '\$24.8K',
  labelColor: Colors.grey[600],
  labelFontSize: 12,
  valueColor: Colors.green[700],
  valueFontWeight: FontWeight.bold,
  valueFontSize: 16,
)

IconTextPair

IconTextPair(
  icon: Icons.location_on,
  text: 'San Francisco',
  iconColor: Colors.grey[500],
  textStyle: TextStyle(
    fontSize: 14,
    color: Colors.grey[600],
  ),
)

CardButton

CardButton(
  text: 'Get Started',
  icon: Icons.play_arrow,
  style: CardButtonStyle.elevated,
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  borderRadius: 10,
  height: 44,
  onPressed: () {
    // Handle button press
  },
)

🎨 Customization Examples #

Creating Custom Themes #

// Dark theme card
AdvancedCard(
  backgroundColor: Colors.grey[900],
  borderColor: Colors.grey[700],
  titleColor: Colors.white,
  descriptionColor: Colors.grey[300],
  shadowColor: Colors.black.withOpacity(0.5),
  // ... other properties
)

// Glassmorphism effect
AdvancedCard(
  backgroundColor: Colors.white.withOpacity(0.1),
  borderWidth: 1,
  borderColor: Colors.white.withOpacity(0.2),
  customShadows: [
    BoxShadow(
      color: Colors.black.withOpacity(0.1),
      blurRadius: 20,
      spreadRadius: 0,
    ),
  ],
  // ... other properties
)

Responsive Design #

LayoutBuilder(
  builder: (context, constraints) {
    return AdvancedCard(
      fullWidth: true,
      titleFontSize: constraints.maxWidth > 600 ? 24 : 18,
      descriptionFontSize: constraints.maxWidth > 600 ? 16 : 14,
      imageRatio: constraints.maxWidth > 600 
          ? ImageRatio.half 
          : ImageRatio.oneThird,
      // ... other responsive properties
    );
  },
)

🏆 Best Practices #

Performance Tips #

1. Use fullWidth: true instead of setting specific widths when possible
2. Optimize images before using them in cards
3. Limit the number of chips and metrics for better performance
4. Use isDisabled: true instead of removing buttons to maintain layout

Design Guidelines #

1. Consistent spacing - Use the same contentSpacing throughout your app
2. Color harmony - Stick to your app's color palette
3. Typography hierarchy - Use different font sizes to create visual hierarchy
4. Accessibility - Ensure sufficient color contrast and touch targets

Common Patterns #

// E-commerce product card
AdvancedCard(
  cardImage: product.imageUrl,
  imagePosition: ImagePosition.top,
  showLikeIcon: true,
  title: product.name,
  description: product.description,
  price: '\$${product.price}',
  rating: product.rating,
  buttonText: 'Add to Cart',
  onButtonPressed: () => addToCart(product),
)

// Social media post card
AdvancedCard(
  cardImage: post.authorAvatar,
  imagePosition: ImagePosition.left,
  imageRatio: ImageRatio.oneThird,
  title: post.authorName,
  description: post.content,
  iconTextPairs: [
    IconTextPair(icon: Icons.favorite, text: '${post.likes}'),
    IconTextPair(icon: Icons.comment, text: '${post.comments}'),
  ],
  buttons: [
    CardButton(text: 'Like', style: CardButtonStyle.text),
    CardButton(text: 'Comment', style: CardButtonStyle.text),
  ],
)

// Dashboard metric card
AdvancedCard(
  backgroundColor: Colors.blue[50],
  title: 'Monthly Revenue',
  customChips: [
    ContentChip(
      text: '+15.3%',
      backgroundColor: Colors.green[100],
      textColor: Colors.green[700],
      prefixIcon: Icons.trending_up,
    ),
  ],
  metrics: [
    MetricItem(label: 'This Month', value: '\$125.4K'),
    MetricItem(label: 'Last Month', value: '\$108.9K'),
  ],
  metricsColumns: 2,
)

🤝 Contributing #

We welcome contributions! Please see our Contributing Guide for details.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Support #

If you find this package helpful, please:

• ⭐ Star the repository
• 🐛 Report issues on GitHub
• 💬 Join our Discord community

📞 Contact #

• Author: Musaid
• Email: musaid1234@example.com
• GitHub: @Musaid1234

Made with ❤️ for the Flutter community