Overlay On Widget

A Flutter package for adding overlay widgets on top of other widgets with ease.

Features

• Easily overlay widgets on top of other widgets.
• Supports customizable positioning and dimensions of overlay widgets.
• Ideal for creating tooltips, pop-ups, or any overlay UI elements.
• Provides a simple and convenient API for adding and managing overlays.

Installation

1. Add this to your pubspec.yaml:

dependencies:
  overlay_on_widget: ^0.0.4 # Use the latest version from pub.dev

2. Install the package by running:

flutter pub get

3. Import the package in your code:

import 'package:overlay_on_widget/overlay_on_widget.dart';

4. Add package:

dart pub add overlay_on_widget

5. Usage: Overlaying a Widget To overlay a widget on top of another widget, you can use the OverlayOnWidget widget.

Here's an example:

Container(
  decoration: ShapeDecoration(
  color: Colors.blue,
  shape: OverlayOnWidget(
    CutoutScreenArea(
      borderColor: Colors.red,
      borderWidth: 3.0,
      overlayColor: Color.fromRGBO(0, 0, 0, 80),
      borderRadius: 10.0,
      borderLength: 40.0,
      cutOutWidth: 150.0,
      cutOutHeight: 150.0,
      ),
    ),
  ),
),

6. Example:

import 'package:flutter/material.dart';

import 'cutoutscreen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Image.network(
                'https://images.pexels.com/photos/2739666/pexels-photo-2739666.jpeg?cs=srgb&dl=pexels-tom-fisk-2739666.jpg&fm=jpg',
                fit: BoxFit.cover,
              ),
              Positioned.fill(
                child: Container(
                  decoration: ShapeDecoration(
                    color: Colors.blue,
                    shape: OverlayOnWidget(
                      CutoutScreenArea(
                        borderColor: Colors.red,
                        borderWidth: 3.0,
                        overlayColor: Color.fromRGBO(0, 0, 0, 80),
                        borderRadius: 10.0,
                        borderLength: 40.0,
                        cutOutWidth: 150.0,
                        cutOutHeight: 150.0,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

7. Changelog: See the Changelog file for detailed changes and version history.

8. Roadmap: Add support for customizing overlay on any widget. Enhance overlay positioning options. Provide additional examples and use cases.

9. Issues and Feedback: Please report any issues or provide feedback on GitHub Issues.

10. Contributing: Contributions are welcome! Follow the Contributing Guide to get started.

11. License: This package is open-source and available under the MIT License.

12. Author: Monirul Islam (+8801729602502 - WhatsApp)

13. GitHub: https://github.com/EngrMonyrul

14. Support: For any inquiries or support, you can reach out to engrmonirulislam513@gmail.com.

15. Location: Dhaka, Bangladesh