pop_overlay #

A feature-rich Flutter package for displaying customizable pop-up notifications, alerts, and overlay UI elements. Featuring: animated, draggable, overlays/popups, and optional background blur.

Demo #

Features #

• ✨ Multiple Overlays: Display multiple popups simultaneously with automatic stacking and priority management
• 🎨 Customizable Animations: Smooth entrance and exit animations with full animation control
• 🌫️ Background Blur Effects: Optional blur overlay with configurable intensity
• 🎯 Tap-to-Dismiss: Background tap dismissal with configurable behavior
• 🖱️ Draggable Popups: Make popups draggable with position tracking using state management
• 📋 Framed Design: Pre-built UI Frame system for consistent popup styling
• ⌨️ Keyboard Support: Escape key listener for keyboard-based dismissal
• ⚡ Performance Optimized: Efficient rendering with smart animation controls
• 🎛️ Full Customization: Control colors, sizes, animations, and more
• 📱 Responsive: Adapts to different screen sizes and orientations

Installation #

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

dependencies:
  pop_overlay: ^1.0.3

Then run:

flutter pub get

Usage #

Basic Pop-up #

import 'package:pop_overlay/pop_overlay.dart';

// Create and show a simple popup
PopOverlay.addPop(
  PopOverlayContent(
    id: 'my_popup',
    widget: Container(
      padding: const EdgeInsets.all(16),
      child: const Text('Hello, Pop Overlay!'),
    ),
  ),
);

// Remove the popup
PopOverlay.removePop('my_popup');

Pop-up with Customization #

PopOverlay.addPop(
  PopOverlayContent(
    id: 'custom_popup',
    widget: MyCustomWidget(),
    barrierDismissible: true,
    barrierColor: Colors.black.withValues(alpha: 0.5),
    animationDuration: const Duration(milliseconds: 300),
  ),
);

Draggable Pop-up #

PopOverlay.addPop(
  PopOverlayContent(
    id: 'draggable_popup',
    widget: MyContentWidget(),
    isDraggeable: true,
  ),
);

Pop-up with Framed Design #

final template = FrameDesign(
  title: 'Settings',
  showCloseButton: true,
  titlePrefixIcon: Icons.settings,
  onSuccess: () => PopOverlay.removePop('settings_popup'),
);

PopOverlay.addPop(
  PopOverlayContent(
    id: 'settings_popup',
    widget: MySettingsWidget(),
    frameDesign: template,
    isDraggeable: true,
  ),
);

API Reference #

PopOverlay #

Main static class for managing popups.

• addPop(PopOverlayContent content) - Add a popup to the overlay
• removePop(String id) - Remove a popup by ID
• removeAllPops() - Remove all active popups
• getPop(String id) - Get a popup by ID

PopOverlayContent #

Configuration class for individual popups.

Parameters:

• id (String) - Unique identifier for the popup
• widget (Widget) - Content widget to display
• isDraggeable (bool) - Enable drag functionality (default: false)
• frameDesign (FrameDesign?) - Optional Frame design template
• barrierDismissible (bool) - Allow dismissal by tapping outside (default: true)
• barrierColor (Color) - Background overlay color
• animationDuration (Duration) - Animation duration for entrance/exit
• positionController (Injected

FrameDesign #

Pre-built Frame template for consistent popup UI.

Parameters:

• title (String?) - Popup title
• showCloseButton (bool) - Show close button (default: true)
• titlePrefixIcon (IconData?) - Icon before title
• onSuccess (VoidCallback?) - Success button callback

Advanced Features #

The gif above demonstrates:

• Multiple stacked popups
• Smooth animations
• Draggable functionality
• Design template styling

Performance Optimizations #

The package includes several performance optimizations:

• Smart Animation Control: Animations are disabled during drag operations for smooth performance
• Efficient State Management: Custom drag state controller prevents unnecessary rebuilds
• Lazy Rendering: Overlays are only rendered when needed
• Minimal Dependencies: Lightweight package with carefully selected dependencies

Dependencies #

• flutter_animate: Advanced animation effects
• s_future_button: Button with async support
• states_rebuilder_extended: State management
• s_widgets: Utility widgets
• sizer: Responsive sizing

See pubspec.yaml for the complete list.

Examples #

Complete working examples are available in the example/ directory:

• Basic pop-up notification
• Draggable popup with Frame Design template
• Multiple popups with priorities
• Customized animations and styling

Run the example:

cd example
flutter run

License #

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

Support #

If you encounter any issues or have feature requests, please file an issue on the GitHub repository.

Made with ❤️ by SoundSliced Ltd