Overlay Popup

A customizable overlay popup widget for Flutter that allows displaying any content on top of the UI with an optional blurred background effect. This widget is useful for creating modal popups, tooltips, and more with interactive content.

Features

• Easily configurable overlay popup with child and custom content.
• Optional blurred background with adjustable opacity.
• Customizable padding for positioning the popup relative to the child widget.
• Built-in functionality to handle popup opening and closing, including callbacks when the popup is opened.

Installation

Add the following dependency in your pubspec.yaml:

dependencies:
  overlay_popup: <latest_version>

Usage

Wrap your widget with the OverlayPopup to display a popup on tap. You can customize the popup's content, background blur, and padding.

Minimal example:

import 'package:flutter/material.dart'; // Import Flutter's material library for UI components.
import 'package:overlay_popup/overlay_popup.dart'; // Import your custom `OverlayPopup` widget.

void main() {
  runApp(const MyApp()); // Start the app by calling `runApp()` and passing the root widget `MyApp`.
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // Constructor for the `MyApp` widget, which is stateless.

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Create a `MaterialApp` widget, which sets up the app's theme and navigation.
      home: Scaffold( // The main layout structure of the app.
        appBar: AppBar(title: const Text('Overlay Popup Example')), // Create an app bar with a title.
        body: Center( // Center the child widget on the screen.
          child: OverlayPopup( // Use the `OverlayPopup` widget you created earlier.
            child: const Icon(Icons.info, size: 50), // The widget (an info icon) that triggers the popup.
            
            content: (closePopup) => Container( // The content to show in the popup, passed as a function.
              padding: const EdgeInsets.all(16), // Add padding around the content inside the popup.
              color: Colors.white, // Set the background color of the popup to white.
              child: Column( // Display multiple widgets in a vertical column.
                mainAxisSize: MainAxisSize.min, // Minimize the size of the column to fit its children.
                children: [
                  const Text('This is a popup!'), // Display a simple text message in the popup.
                  const SizedBox(height: 10), // Add vertical space between the text and the button.
                  ElevatedButton( // Create a button in the popup.
                    onPressed: closePopup, // When the button is pressed, close the popup.
                    child: const Text('Close'), // The label of the button.
                  ),
                ],
              ),
            ),

            blurBackground: true, // Enable background blurring when the popup is shown.
            blurOpacity: 0.3, // Set the opacity for the blurred background.
            backgroundColor: Colors.white, // Set the background color of the popup content to white.
            horizontalPadding: 10, // Add 10 pixels of horizontal padding to the popup positioning.
            verticalPadding: 20, // Add 20 pixels of vertical padding to the popup positioning.
            
            onOpened: () { // Callback function that runs when the popup is opened.
              print('Popup opened'); // Print "Popup opened" to the console when the popup is shown.
            },
          ),
        ),
      ),
    );
  }
}

Parameters

Notes

• Positioning: You can control the exact position of the popup by providing values for horizontalPadding and verticalPadding.
• Blur Effect: The blurBackground feature can enhance user experience by adding focus to the popup while dimming the rest of the UI.

Author

Developed with ❤️ by Sanoop Das. Connect with me on LinkedIn.

Support

If you like this package, please give it a ⭐ on pub.dev and share it with the Flutter community!

Happy Coding!