Borders around the Hotspot callout target Functionality

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "flutter_hotspot",
+            "request": "launch",
+            "type": "dart",
+            "program": "example/lib/main.dart",
+        },
+    ]
+}

example/ios/Runner/AppDelegate.swift

@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

example/lib/main.dart

@@ -21,8 +21,12 @@ class MyApp extends StatelessWidget {
         brightness: Brightness.dark,
         colorSchemeSeed: Colors.purple,
       ),
-      home: const HotspotProvider(
-        child: MyHomePage(title: 'Hotspot Demo Home Page'),
+      home: HotspotProvider(
+        hotspotShapeBorder: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(100),
+          side: const BorderSide(color: Colors.blue, width: 2),
+        ),
+        child: const MyHomePage(title: 'Hotspot Demo Home Page'),
       ),
     );
   }
@@ -63,6 +67,10 @@ class _MyHomePageState extends State<MyHomePage> {
           order: 1,
           title: "Let's get started!",
           text: "We're going to give you an example tour with hotspot",
+          hotspotShape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(1),
+            side: const BorderSide(color: Colors.red, width: 2),
+          ),
         ),
         actions: [
           IconButton(

example/pubspec.lock

@@ -81,23 +81,23 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.1"
+    version: "0.1.3"
   leak_tracker:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
+      sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.4"
+    version: "10.0.5"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
+      sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.3"
+    version: "3.0.5"
   leak_tracker_testing:
     dependency: transitive
     description:
@@ -126,18 +126,18 @@ packages:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.0"
+    version: "0.11.1"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
+      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
       url: "https://pub.dev"
     source: hosted
-    version: "1.12.0"
+    version: "1.15.0"
   nested:
     dependency: transitive
     description:
@@ -211,10 +211,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
+      sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.0"
+    version: "0.7.2"
   vector_math:
     dependency: transitive
     description:
@@ -227,10 +227,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.1"
+    version: "14.2.5"
 sdks:
   dart: ">=3.4.3 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"

lib/src/callout_tail_painter.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/widgets.dart';
 
 class CalloutTailPainter extends CustomPainter {
-  /// Paints the callout tail for [HotspotProvider] based on a [Rect] bounds
+  /// Paints the callout tail for [HotspotProvider] based on a [Rect] bounds.
   CalloutTailPainter({
     required this.tailBounds,
     required this.color,
@@ -28,6 +28,7 @@ class CalloutTailPainter extends CustomPainter {
       ..lineTo(tailBounds.centerLeft.dx, tailBounds.centerLeft.dy)
       ..lineTo(tailBounds.topCenter.dx, tailBounds.topCenter.dy);
 
+    // Draw the fill
     canvas.drawPath(tailPath, backgroundPaint);
   }
 

lib/src/hotspot_painter.dart

@@ -6,7 +6,14 @@ class HotspotPainter extends CustomPainter {
     required this.hotspotBounds,
     required this.skrimColor,
     required this.shapeBorder,
-  });
+    this.hotspotBorderColor,
+    this.hotspotBorderWidth,
+  }) {
+    if (shapeBorder is OutlinedBorder) {
+      hotspotBorderColor ??= (shapeBorder as OutlinedBorder).side.color;
+      hotspotBorderWidth ??= (shapeBorder as OutlinedBorder).side.width;
+    }
+  }
 
   /// The target to highlight with a hotspot.
   final Rect hotspotBounds;
@@ -16,6 +23,12 @@ class HotspotPainter extends CustomPainter {
   /// hotspot cutouts that surround the appropriate [HotspotTarget].
   final Color skrimColor;
 
+  /// The color of the hotspot border. If null, value is derived from the [shapeBorder] if it is an [OutlinedBorder].
+  Color? hotspotBorderColor;
+
+  /// The width of the hotspot border. If null, value is derived from the [shapeBorder] if it is an [OutlinedBorder].
+  num? hotspotBorderWidth;
+
   /// Override the convenience [radius] with a custom [ShapeBorder]
   ///
   /// Particularly useful for defining squircle borders.
@@ -37,11 +50,25 @@ class HotspotPainter extends CustomPainter {
     final path = Path.combine(PathOperation.difference, skrimPath, hotspotPath);
 
     canvas.drawPath(path, skrimPaint);
+
+    // Draw the border if borderColor and borderWidth are set
+    if (hotspotBorderColor != null &&
+        hotspotBorderWidth != null &&
+        hotspotBorderWidth! > 0) {
+      final borderPaint = Paint()
+        ..style = PaintingStyle.stroke
+        ..color = hotspotBorderColor!
+        ..strokeWidth = hotspotBorderWidth!.toDouble();
+
+      canvas.drawPath(hotspotPath, borderPaint);
+    }
   }
 
   @override
   bool shouldRepaint(HotspotPainter old) =>
       hotspotBounds != old.hotspotBounds ||
       skrimColor != old.skrimColor ||
-      shapeBorder != old.shapeBorder;
+      shapeBorder != old.shapeBorder ||
+      hotspotBorderColor != old.hotspotBorderColor ||
+      hotspotBorderWidth != old.hotspotBorderWidth;
 }

lib/src/hotspot_provider.dart

@@ -96,6 +96,8 @@ class HotspotProvider extends StatefulWidget {
     this.bodyPadding = const EdgeInsets.all(16),
     this.dismissibleSkrim = true,
     this.skrimCurve = Curves.easeOutExpo,
+    this.hotspotBorderColor,
+    this.hotspotBorderWidth,
   }) : super(key: key);
 
   /// The child which contains multiple [HotspotTarget] in the tree.
@@ -150,6 +152,12 @@ class HotspotProvider extends StatefulWidget {
   /// Curve for the skrim.
   final Curve skrimCurve;
 
+  /// Border color of the hotspot. if null, value is derived from the [hotspotShapeBorder] if it is an [OutlinedBorder].
+  final Color? hotspotBorderColor;
+
+  /// Width of the border of the hotspot. if null, value is derived from the [hotspotShapeBorder] if it is an [OutlinedBorder].
+  final num? hotspotBorderWidth;
+
   /// Retreive the ancestor [HotspotProvider] for the purpose of performing actions.
   static HotspotProviderState of(BuildContext context) =>
       Provider.of<HotspotProviderState>(context, listen: false);
@@ -344,7 +352,14 @@ class HotspotProviderState extends State<HotspotProvider>
                 return CustomPaint(
                   painter: HotspotPainter(
                     hotspotBounds: t!,
-                    shapeBorder: widget.hotspotShapeBorder,
+                    hotspotBorderColor:
+                        currentTarget.widget.hotspotBorderColor ??
+                            widget.hotspotBorderColor,
+                    hotspotBorderWidth:
+                        currentTarget.widget.hotspotBorderWidth ??
+                            widget.hotspotBorderWidth,
+                    shapeBorder: currentTarget.widget.hotspotShape ??
+                        widget.hotspotShapeBorder,
                     skrimColor: widget.skrimColor ??
                         Theme.of(context).colorScheme.scrim.withOpacity(0.4),
                   ),

lib/src/hotspot_target.dart

@@ -75,6 +75,9 @@ class HotspotTarget extends StatefulWidget {
     required this.child,
     this.hotspotSize,
     this.hotspotOffset = Offset.zero,
+    this.hotspotShape,
+    this.hotspotBorderWidth,
+    this.hotspotBorderColor,
   }) : super(key: key);
 
   /// Combines multiple hotspot targets into a single group.
@@ -102,6 +105,15 @@ class HotspotTarget extends StatefulWidget {
   /// Override the hotspot center with a custom offset.
   final Offset hotspotOffset;
 
+  /// The shape of the hotspot. Has a higher priority than the corresponding shape in [HotspotProvider].
+  final ShapeBorder? hotspotShape;
+
+  /// The width of the hotspot border. Has a higher priority than the corresponding width in [HotspotProvider].
+  final num? hotspotBorderWidth;
+
+  /// The color of the hotspot border. Has a higher priority than the corresponding color in [HotspotProvider].
+  final Color? hotspotBorderColor;
+
   @override
   HotspotTargetState createState() => HotspotTargetState();
 }

lib/src/with_hotspot_x.dart

@@ -11,6 +11,9 @@ extension WithHotspotX on Widget {
     Widget? icon,
     Size? hotspotSize,
     Offset hotspotOffset = Offset.zero,
+    ShapeBorder? hotspotShape,
+    num? hotspotBorderWidth,
+    Color? hotspotBorderColor,
   }) {
     return Builder(
       builder: (context) {
@@ -22,6 +25,9 @@ extension WithHotspotX on Widget {
           hotspotSize: hotspotSize,
           hotspotOffset: hotspotOffset,
           order: order,
+          hotspotBorderColor: hotspotBorderColor,
+          hotspotBorderWidth: hotspotBorderWidth,
+          hotspotShape: hotspotShape,
           calloutBody: Row(
             children: [
               if (icon != null) ...[

pubspec.lock

@@ -63,18 +63,18 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
+      sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.4"
+    version: "10.0.5"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
+      sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.3"
+    version: "3.0.5"
   leak_tracker_testing:
     dependency: transitive
     description:
@@ -95,18 +95,18 @@ packages:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.0"
+    version: "0.11.1"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
+      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
       url: "https://pub.dev"
     source: hosted
-    version: "1.12.0"
+    version: "1.15.0"
   nested:
     dependency: transitive
     description:
@@ -180,10 +180,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
+      sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.0"
+    version: "0.7.2"
   vector_math:
     dependency: transitive
     description:
@@ -196,10 +196,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.1"
+    version: "14.2.5"
 sdks:
   dart: ">=3.4.3 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"