✨ add overlay padding

example/lib/main.dart

@@ -14,6 +14,7 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
+      debugShowCheckedModeBanner: false,
       home: Scaffold(
         body: ShowCaseWidget(
           onStart: (index, key) {
@@ -56,6 +57,7 @@ class _MailPageState extends State<MailPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(),
       body: SafeArea(
         child: ListView(
           children: <Widget>[
@@ -98,6 +100,7 @@ class _MailPageState extends State<MailPage> {
                             ),
                           ),
                           Showcase(
+                            overlayPadding: EdgeInsets.all(5),
                             key: _two,
                             title: 'Profile',
                             description:

lib/src/get_position.dart

@@ -29,8 +29,15 @@ import 'package:flutter/material.dart';
 
 class GetPosition {
   final GlobalKey? key;
+  final EdgeInsets padding;
+  final double? screenWidth;
+  final double? screenHeight;
 
-  GetPosition({this.key});
+  GetPosition(
+      {this.key,
+      this.padding = EdgeInsets.zero,
+      this.screenWidth,
+      this.screenHeight});
 
   Rect getRect() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
@@ -40,10 +47,14 @@ class GetPosition {
         box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0)));
 
     final rect = Rect.fromLTRB(
-      topLeft.dx,
-      topLeft.dy,
-      bottomRight.dx,
-      bottomRight.dy,
+      topLeft.dx - padding.left < 0 ? 0 : topLeft.dx - padding.left,
+      topLeft.dy - padding.top < 0 ? 0 : topLeft.dy - padding.top,
+      bottomRight.dx + padding.right > screenWidth!
+          ? screenWidth!
+          : bottomRight.dx + padding.right,
+      bottomRight.dy + padding.bottom > screenHeight!
+          ? screenHeight!
+          : bottomRight.dy + padding.bottom,
     );
     return rect;
   }
@@ -53,29 +64,29 @@ class GetPosition {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
     final bottomRight =
         box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0)));
-    return bottomRight.dy;
+    return bottomRight.dy + padding.bottom;
   }
 
   ///Get the top position of the widget
   double getTop() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
     final topLeft = box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0)));
-    return topLeft.dy;
+    return topLeft.dy - padding.top;
   }
 
   ///Get the left position of the widget
   double getLeft() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
     final topLeft = box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0)));
-    return topLeft.dx;
+    return topLeft.dx - padding.left;
   }
 
   ///Get the right position of the widget
   double getRight() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
     final bottomRight =
         box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0)));
-    return bottomRight.dx;
+    return bottomRight.dx + padding.right;
   }
 
   double getHeight() {

lib/src/showcase.dart

@@ -60,27 +60,29 @@ class Showcase extends StatefulWidget {
   final VoidCallback? onTargetClick;
   final bool? disposeOnTap;
   final bool disableAnimation;
+  final EdgeInsets overlayPadding;
 
-  const Showcase({
-    required this.key,
-    required this.child,
-    this.title,
-    required this.description,
-    this.shapeBorder,
-    this.overlayColor = Colors.black,
-    this.overlayOpacity = 0.75,
-    this.titleTextStyle,
-    this.descTextStyle,
-    this.showcaseBackgroundColor = Colors.white,
-    this.textColor = Colors.black,
-    this.showArrow = true,
-    this.onTargetClick,
-    this.disposeOnTap,
-    this.animationDuration = const Duration(milliseconds: 2000),
-    this.disableAnimation = false,
-    this.contentPadding = const EdgeInsets.symmetric(vertical: 8),
-    this.onToolTipClick,
-  })  : height = null,
+  const Showcase(
+      {required this.key,
+      required this.child,
+      this.title,
+      required this.description,
+      this.shapeBorder,
+      this.overlayColor = Colors.black,
+      this.overlayOpacity = 0.75,
+      this.titleTextStyle,
+      this.descTextStyle,
+      this.showcaseBackgroundColor = Colors.white,
+      this.textColor = Colors.black,
+      this.showArrow = true,
+      this.onTargetClick,
+      this.disposeOnTap,
+      this.animationDuration = const Duration(milliseconds: 2000),
+      this.disableAnimation = false,
+      this.contentPadding = const EdgeInsets.symmetric(vertical: 8),
+      this.onToolTipClick,
+      this.overlayPadding = EdgeInsets.zero})
+      : height = null,
         width = null,
         container = null,
         assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
@@ -116,6 +118,7 @@ class Showcase extends StatefulWidget {
     this.animationDuration = const Duration(milliseconds: 2000),
     this.disableAnimation = false,
     this.contentPadding = const EdgeInsets.symmetric(vertical: 8),
+    this.overlayPadding = EdgeInsets.zero,
   })  : showArrow = false,
         onToolTipClick = null,
         assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
@@ -154,8 +157,6 @@ class _ShowcaseState extends State<Showcase> with TickerProviderStateMixin {
       parent: _slideAnimationController,
       curve: Curves.easeInOut,
     );
-
-    position = GetPosition(key: widget.key);
   }
 
   @override
@@ -167,6 +168,12 @@ class _ShowcaseState extends State<Showcase> with TickerProviderStateMixin {
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
+    position ??= GetPosition(
+      key: widget.key,
+      padding: widget.overlayPadding,
+      screenWidth: MediaQuery.of(context).size.width,
+      screenHeight: MediaQuery.of(context).size.height,
+    );
     showOverlay();
   }