Flutter Overlay Widget Demo

This project demonstrates how to implement different types of overlay widgets in Flutter. I created this to explore the Overlay widget's capabilities and to have a reference for future projects that need popup notifications, modal dialogs, or loading screens.

What This Demo Shows

The app includes three different overlay examples:

1. Push Notification Style - A card that slides in from the top, perfect for displaying follow notifications, messages, or alerts. Auto-dismisses after 3 seconds.

2. Confirmation Dialog - A centered modal popup with confirm/cancel buttons. Great for delete actions or other destructive operations that need user confirmation.

3. Loading Overlay - A full-screen loading indicator that blocks user interaction. Useful during API calls or file processing.

Key Flutter Concepts Demonstrated

• Using OverlayEntry to create custom overlay content
• Positioning overlays with Positioned widget
• Inserting overlays into the widget tree with Overlay.of(context).insert()
• Proper cleanup and removal of overlay entries
• Creating semi-transparent background overlays

Running the Project

flutter pub get
flutter run

Tap the buttons to see each overlay type in action. The notification will auto-dismiss, while the dialog and loading screen can be dismissed by tapping the close button or waiting for the timeout.

Implementation Notes

Each overlay is built using OverlayEntry with a custom builder function. The overlays are inserted into the app's overlay stack and removed either automatically (with Future.delayed) or manually when the user interacts with them.

This approach is more flexible than using showDialog() or ScaffoldMessenger because you have complete control over positioning, styling, and behavior.

Next Steps

Planning to add more overlay patterns like:

• Toast notifications
• Action sheets
• Custom tooltips
• Multi-step overlays

Feel free to use this code as a starting point for your own overlay implementations!