swipify 0.0.4

swipify: ^0.0.4 copied to clipboard

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: Padding(
          padding: const EdgeInsets.all(20.0),
          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,
          ),
        );
      }),
    );
  }
}