swipify 0.0.1

A beautiful and customizable Flutter widget for creating swipeable card stacks with smooth animations and depth effects. Perfect for Tinder-like interfaces and interactive card-based UIs.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:swipify/swipify.dart';
import 'theme.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.lightTheme,
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Swipify Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  
  // Sposto l'array fuori dal build per evitare che venga ricreato ad ogni setState
  final List<Map<String, dynamic>> _items = [
    {'title': 'AI Revolution in 2025', 'subtitle': 'How artificial intelligence is transforming industries worldwide', 'tag': 'AI', 'tagBgColor': const Color(0xFFBFC2FF), 'tagFgColor': const Color(0xFF1E293B)},
    {'title': 'Cloud Computing Trends', 'subtitle': 'Latest developments in serverless architecture and edge computing', 'tag': 'Cloud', 'tagBgColor': const Color(0xFFB5F5EC), 'tagFgColor': const Color(0xFF0F766E)},
    {'title': 'Flutter 4.0 Released', 'subtitle': 'Major performance improvements and new widgets for mobile developers', 'tag': 'Mobile', 'tagBgColor': const Color(0xFFFED7AA), 'tagFgColor': const Color(0xFF92400E)},
    {'title': 'Cybersecurity Best Practices', 'subtitle': 'Essential tips to protect your applications from modern threats', 'tag': 'Security', 'tagBgColor': const Color(0xFFFECDD3), 'tagFgColor': const Color(0xFF881337)},
    {'title': 'GraphQL vs REST APIs', 'subtitle': 'Comparing the two most popular approaches to building modern APIs', 'tag': 'Backend', 'tagBgColor': const Color(0xFFDDD6FE), 'tagFgColor': const Color(0xFF5B21B6)},
    {'title': 'Machine Learning on Edge Devices', 'subtitle': 'Running ML models directly on smartphones and IoT devices', 'tag': 'AI', 'tagBgColor': const Color(0xFFBFC2FF), 'tagFgColor': const Color(0xFF1E293B)},
    {'title': 'DevOps Automation Tools', 'subtitle': 'Top CI/CD platforms for streamlining your development workflow', 'tag': 'DevOps', 'tagBgColor': const Color(0xFFFEF3C7), 'tagFgColor': const Color(0xFF78350F)},
    {'title': 'Web3 and Blockchain', 'subtitle': 'Understanding decentralized applications and smart contracts', 'tag': 'Blockchain', 'tagBgColor': const Color(0xFFD1FAE5), 'tagFgColor': const Color(0xFF064E3B)},
    {'title': 'React Native Performance Tips', 'subtitle': 'Optimize your mobile apps for speed and smooth animations', 'tag': 'Mobile', 'tagBgColor': const Color(0xFFFED7AA), 'tagFgColor': const Color(0xFF92400E)},
    {'title': 'Docker & Kubernetes Guide', 'subtitle': 'Containerization strategies for scalable microservices', 'tag': 'DevOps', 'tagBgColor': const Color(0xFFFEF3C7), 'tagFgColor': const Color(0xFF78350F)},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Spacer(),
              SizedBox(
                height: 400,
                child: SwipifyWidget<Map<String, dynamic>>(
                  items: _items,
                  builder: (context, item) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Chip(
                            label: Text(item['tag'], style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: item['tagFgColor'])), 
                            backgroundColor: item['tagBgColor'],
                          ),
                          const SizedBox(height: 8),
                          Text(item['title'], style: Theme.of(context).textTheme.titleLarge),
                          const SizedBox(height: 4),
                          Text(item['subtitle'], style: Theme.of(context).textTheme.bodyLarge),
                        ],
                      ),
                    );
                  },
                  cards: 4,
                  style: SwipifyStyle(
                    deckColor: Theme.of(context).colorScheme.secondaryContainer,
                    shadowColor: const Color(0x090e1d0d).withValues(alpha: 0.1),
                    elevation: 10.0,
                    yOffset: 44.0,
                  ),
                  onCardChanged: (index, item) {
                    setState(() {
                      _currentIndex = index;
                    });
                  },
                ),
              ),
              // Page indicator
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: PageIndicator(
                  currentIndex: _currentIndex,
                  itemCount: _items.length,
                ),
              ),
              Spacer(),
              // Footer with version info
              const Padding(
                padding: EdgeInsets.all(16.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      'Swipify v0.0.1',
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey,
                      ),
                    ),
                    SizedBox(height: 4),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          'Made with ',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                        Text(
                          '❤️',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.red,
                          ),
                        ),
                        Text(
                          ' by Vincenzo Romano',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// A widget that displays bullet points to indicate the current page
class PageIndicator extends StatelessWidget {
  final int currentIndex;
  final int itemCount;
  final Color? activeColor;
  final Color? inactiveColor;
  final double dotSize;
  final double spacing;

  const PageIndicator({
    super.key,
    required this.currentIndex,
    required this.itemCount,
    this.activeColor,
    this.inactiveColor,
    this.dotSize = 8.0,
    this.spacing = 8.0,
  });

  @override
  Widget build(BuildContext context) {
    final active = activeColor ?? Theme.of(context).colorScheme.primary;
    final inactive = inactiveColor ?? Theme.of(context).colorScheme.primary.withValues(alpha: 0.3);

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(itemCount, (index) {
        final isActive = index == currentIndex;
        return Container(
          margin: EdgeInsets.symmetric(horizontal: spacing / 2),
          width: dotSize,
          height: dotSize,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: isActive ? active : inactive,
          ),
        );
      }),
    );
  }
}