promo_carousel 1.0.0

A flexible, customizable promotional carousel package for Flutter with support for user-specific widget injection. Perfect for onboarding, feature announcements, and personalized promotions.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:promo_carousel/promo_carousel.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Promo Carousel Demo',
      theme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.deepPurple)),
      home: const DemoPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Promo Carousel Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showPromoCarousel(context),
          child: const Text('Show Promo Carousel'),
        ),
      ),
    );
  }

  void _showPromoCarousel(BuildContext context) {
    // Simulated user data
    final userZodiacSign = '♋ Cancer';
    // final userTopSearch = 'why am I crying at 3am';

    PromoCarousel.show(
      context: context,
      slides: [
        PromoSlide(
          id: 'zodiac_preview',
          title: 'Late-Night Most\nGoogled\nSecrets',
          subtitle: null,
          visualType: PromoVisualType.custom,
          cta: PromoCTA(
            text: 'Face your secrets',
            action: PromoAction.openFeature,
            target: 'zodiac_detail',
          ),
          rules: const PromoRules(showOnce: true),
          customContentBuilder: (context) {
            // Custom user-specific widget injected by host app
            return Container(
              height: 200,
              decoration: BoxDecoration(
                color: Colors.grey[900],
                borderRadius: BorderRadius.circular(16),
              ),
              padding: const EdgeInsets.all(24),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 12,
                    ),
                    decoration: BoxDecoration(
                      color: Colors.grey[800],
                      borderRadius: BorderRadius.circular(24),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Icon(Icons.search, color: Colors.grey[400], size: 20),
                        const SizedBox(width: 8),
                        Expanded(
                          child: Text(
                            'your search history is loading...',
                            style: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 14,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 24),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(
                        Icons.auto_awesome,
                        color: Colors.blue,
                        size: 20,
                      ),
                      const SizedBox(width: 8),
                      Flexible(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'The Google searches',
                              style: TextStyle(
                                color: Colors.grey[400],
                                fontSize: 13,
                              ),
                            ),
                            RichText(
                              text: TextSpan(
                                style: const TextStyle(
                                  fontSize: 13,
                                  color: Colors.white,
                                ),
                                children: [
                                  const TextSpan(text: 'your zodiac sign '),
                                  TextSpan(
                                    text: userZodiacSign,
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Text(
                              'hopes that it dies with them',
                              style: TextStyle(
                                color: Colors.grey[400],
                                fontSize: 13,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
        PromoSlide(
          id: 'feature_2',
          title: 'Discover Your Moon Phase',
          subtitle: 'Track lunar cycles and their influence',
          visualType: PromoVisualType.featureHighlight,
          cta: PromoCTA(
            text: 'Explore',
            action: PromoAction.navigate,
            target: '/moon-phase',
          ),
          rules: const PromoRules(showOnce: false),
        ),
        PromoSlide(
          id: 'premium_offer',
          title: 'Unlock Premium Features',
          subtitle: 'Get personalized insights and more',
          visualType: PromoVisualType.searchBar,
          cta: PromoCTA(text: 'Upgrade Now', action: PromoAction.openPaywall),
          rules: const PromoRules(showOnce: true),
        ),
      ],
      config: const PromoCarouselConfig(
        showCloseButton: true,
        showDontShowAgain: false,
      ),
      onAction: (action, target) {
        print('Action: $action, Target: $target');
        // Handle navigation or feature opening here
      },
      onDismiss: () {
        print('Carousel dismissed');
      },
    );
  }
}