Banner Package

A customizable Flutter banner package for displaying beautiful promotional banners, advertisements, and call-to-action messages in your Flutter applications.

Features

🎨 Multiple Banner Types

  • Promotional banners for offers and announcements
  • Advertisement banners with product information
  • Call-to-action banners for user engagement

✨ Rich Customization

  • Configurable colors, gradients, and themes
  • Multiple animation types (slide, fade, scale)
  • Adjustable sizes and positions
  • Custom icons and images
  • Border radius and elevation options

🎯 User Experience

  • Auto-dismiss with configurable duration
  • Swipe-to-dismiss functionality
  • Responsive design for all screen sizes
  • Accessibility support

âš¡ Developer Friendly

  • Easy integration with minimal code
  • Comprehensive documentation
  • Type-safe configuration
  • Well-tested components

Installation

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

dependencies:
  banner_package: ^0.0.3

Then run:

flutter pub get

Quick Start

Import the package:

import 'package:banner_package/banner_package.dart';

Promotional Banner

PromotionalBanner(
  title: '🎉 Special Offer!',
  subtitle: 'Get 50% off on all premium features',
  buttonText: 'Claim Now',
  icon: Icons.local_offer,
  onButtonPressed: () {
    // Handle button press
  },
)

AdBanner(
  title: 'Premium Headphones',
  description: 'High-quality wireless headphones',
  price: '\$299.99',
  discount: '30% OFF',
  actionText: 'Buy Now',
  onActionPressed: () {
    // Handle purchase
  },
)

Call-to-Action Banner

CallToActionBanner(
  title: 'Don\'t miss out!',
  description: 'Limited time offer',
  primaryActionText: 'Get Started',
  secondaryActionText: 'Learn More',
  onPrimaryAction: () {
    // Handle primary action
  },
  onSecondaryAction: () {
    // Handle secondary action
  },
)

Configuration Options

enum BannerPosition {
  top,        // Top of screen
  bottom,     // Bottom of screen
  center,     // Center of screen
  floating,   // Floating overlay
}

Animation Types

enum BannerAnimation {
  slideFromTop,
  slideFromBottom,
  slideFromLeft,
  slideFromRight,
  fadeIn,
  scaleIn,
  none,
}

enum BannerSize {
  small,      // 60px height
  medium,     // 80px height
  large,      // 120px height
  custom,     // Custom height
}

Background Images

The PromotionalBanner supports background images for more visually appealing designs:

PromotionalBanner(
  title: 'Summer Sale',
  subtitle: 'Get up to 50% off on all items',
  buttonText: 'Shop Now',
  backgroundImageUrl: 'https://example.com/summer-background.jpg',
  backgroundImageFit: BoxFit.cover,
  backgroundImageOverlay: 0.4, // Semi-transparent overlay for text readability
  textColor: Colors.white,
  onButtonPressed: () {
    // Handle button press
  },
)

Background Image Properties:

  • backgroundImageUrl - URL of the background image
  • backgroundImageFit - How the image should be fitted (defaults to BoxFit.cover)
  • backgroundImageOverlay - Overlay opacity from 0.0 to 1.0 for better text readability (defaults to 0.3)

When a background image is used, the banner automatically disables background colors and gradients.

Advanced Usage

Custom Theme

final customTheme = BannerTheme(
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  buttonColor: Colors.orange,
  buttonTextColor: Colors.white,
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.pink],
  ),
);

PromotionalBanner(
  title: 'Custom Themed Banner',
  theme: customTheme,
  // ... other properties
)

Complete Example

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showBanner = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Banner Demo')),
      body: Stack(
        children: [
          // Main content
          Center(
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  showBanner = true;
                });
              },
              child: Text('Show Banner'),
            ),
          ),
          
          // Banner overlay
          if (showBanner)
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: PromotionalBanner(
                title: 'Welcome!',
                subtitle: 'Thanks for using our app',
                buttonText: 'Get Started',
                icon: Icons.celebration,
                animation: BannerAnimation.slideFromTop,
                bannerType: BannerType.promotional,
                autoDismissDuration: Duration(seconds: 8),
                onButtonPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Getting started!')),
                  );
                },
                onDismiss: () {
                  setState(() {
                    showBanner = false;
                  });
                },
              ),
            ),
        ],
      ),
    );
  }
}

License

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

Libraries