Swipify 🃏 #

A beautiful and customizable Flutter widget for creating swipeable card stacks with smooth animations and depth effects.

Perfect for creating Tinder-like interfaces, product showcases, or any interactive card-based UI.

✨ Features #

• 🎴 Swipeable card stack - Smooth drag-and-drop interactions
• 🎨 Fully customizable - Control colors, shadows, spacing, and more
• 📐 Depth effect - Cards scale and fade behind the top card
• ⚡ Smooth animations - Fluid transitions when cards change position
• 🎯 Type-safe - Generic support for any data type
• 🔧 Easy to use - Simple API with sensible defaults
• 🎭 Material Design 3 - Follows Flutter's latest design guidelines

📸 Preview #

🚀 Getting Started #

Installation #

Add swipify to your pubspec.yaml:

dependencies:
  swipify: ^0.0.1

Then run:

flutter pub get

Import #

import 'package:swipify/swipify.dart';

💡 Usage #

Basic Example #

SwipifyWidget<String>(
  items: ['Card 1', 'Card 2', 'Card 3', 'Card 4'],
  builder: (context, item) {
    return Center(
      child: Text(
        item,
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
    );
  },
)

Advanced Example with Custom Styling #

SwipifyWidget<Map<String, dynamic>>(
  items: [
    {
      'title': 'AI Revolution in 2025',
      'subtitle': 'How artificial intelligence is transforming industries',
      'tag': 'AI',
      'tagBgColor': Color(0xFFBFC2FF),
      'tagFgColor': Color(0xFF1E293B),
    },
    // Add more items...
  ],
  cards: 4, // Number of cards visible in the stack
  style: SwipifyStyle(
    deckColor: Colors.grey.shade200,
    shadowColor: Colors.black26,
    elevation: 15.0,
    yOffset: 44.0,
  ),
  onCardChanged: (index, item) {
    // Called when a card is swiped
    print('New card at index $index: ${item['title']}');
    // Update your state, analytics, etc.
  },
  builder: (context, item) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Chip(
            label: Text(item['tag']),
            backgroundColor: item['tagBgColor'],
          ),
          SizedBox(height: 12),
          Text(
            item['title'],
            style: Theme.of(context).textTheme.titleLarge,
          ),
          SizedBox(height: 8),
          Text(
            item['subtitle'],
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
    );
  },
)

Example with State Management #

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int currentCardIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Current Card: $currentCardIndex'),
        Expanded(
          child: SwipifyWidget<String>(
            items: ['Card 1', 'Card 2', 'Card 3'],
            onCardChanged: (index, item) {
              setState(() {
                currentCardIndex = index;
              });
              // Track analytics
              analytics.logEvent('card_swiped', {'item': item});
            },
            builder: (context, item) {
              return Center(child: Text(item));
            },
          ),
        ),
      ],
    );
  }
}

🎛️ API Reference #

SwipifyWidget #

The main widget for creating swipeable card stacks.

Parameters

SwipifyStyle #

Configuration class for customizing the appearance of the card stack.

Properties

Example

SwipifyStyle customStyle = SwipifyStyle(
  deckColor: Color(0xFFE6E8F2),
  shadowColor: Colors.black.withOpacity(0.1),
  elevation: 10.0,
  yOffset: 50.0,
);

SwipifyStyle Methods #

// Create a copy with modified properties
SwipifyStyle newStyle = style.copyWith(
  elevation: 20.0,
  yOffset: 60.0,
);

🎨 Customization Examples #

Changing Card Appearance #

SwipifyWidget<Product>(
  items: products,
  style: SwipifyStyle(
    deckColor: Colors.blueGrey.shade100,
    shadowColor: Colors.blue.withOpacity(0.3),
    elevation: 20.0,
    yOffset: 50.0,
  ),
  builder: (context, product) {
    return YourCustomCardWidget(product);
  },
)

Controlling Number of Visible Cards #

SwipifyWidget<Item>(
  items: myItems,
  cards: 3, // Show only 3 cards in the stack
  builder: (context, item) {
    return ItemCard(item);
  },
)

🏗️ How It Works #

1. Card Stack: Cards are displayed in a stack with the topmost card fully visible
2. Depth Effect: Cards behind the top card are:
   • Slightly scaled down (75% to 95% of full size)
   • Positioned higher by yOffset pixels
   • Covered by a semi-transparent overlay
3. Swipe Gesture: When the top card is dragged away:
   • The card disappears immediately
   • Cards behind animate smoothly to their new positions
   • The removed card is moved to the bottom of the stack
4. Continuous Loop: The stack cycles through all items indefinitely

📱 Platform Support #

• ✅ Android
• ✅ iOS
• ✅ Web
• ✅ macOS
• ✅ Windows
• ✅ Linux

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License #

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

🙏 Acknowledgments #

• Inspired by Tinder's swipe interface
• Built with Flutter's powerful animation framework
• Uses Material Design 3 principles

📧 Contact #

For questions or suggestions, please open an issue on GitHub.

Made with ❤️ by Vincenzo Romano