fix: merge into one config class

README.md

@@ -115,7 +115,6 @@ The configuration of `SpotlightShow`:
 | - | - | - |
 | showAfterInit | `true` | If you want to fire it by program, set it to false |
 | showWaitFuture | `null` | Pass the `Future` and it will wait until it done and start the show. |
-| routeObserver | `null` | Give ability to pause the show when route been pushed above current route |
 | onSkip | `null` | Callback after tapping `SpotlightAntAction.skip`. |
 | onFinish | `null` | Callback after finish the show. |
 

example/lib/main.dart

@@ -45,10 +45,14 @@ class _StartPageState extends State<StartPage> {
               fontSize: 26,
               child: Text('Configure your spotlight...'),
             ),
-            actions: const [SpotlightAntAction.prev, SpotlightAntAction.next],
-            bumpDuration: const Duration(milliseconds: 200),
-            zoomInDuration: const Duration(milliseconds: 300),
-            zoomOutDuration: const Duration(milliseconds: 300),
+            action: const SpotlightActionConfig(
+              enabled: [SpotlightAntAction.prev, SpotlightAntAction.next],
+            ),
+            duration: const SpotlightDurationConfig(
+              bump: Duration(milliseconds: 200),
+              zoomIn: Duration(milliseconds: 300),
+              zoomOut: Duration(milliseconds: 300),
+            ),
             bumpRatio: 1.0,
             child: IconButton(
               icon: const Icon(Icons.menu_sharp),
@@ -60,9 +64,13 @@ class _StartPageState extends State<StartPage> {
       ),
       floatingActionButtonWrapper: (btn) => SpotlightAnt(
         enable: isFirst,
-        spotlightBuilder: const SpotlightRectBuilder(borderRadius: 20),
-        actions: const [SpotlightAntAction.prev],
-        spotlightPadding: EdgeInsets.zero,
+        spotlight: const SpotlightConfig(
+          builder: SpotlightRectBuilder(borderRadius: 20),
+          padding: EdgeInsets.zero,
+        ),
+        action: const SpotlightActionConfig(
+          enabled: [SpotlightAntAction.prev],
+        ),
         content: const SpotlightContent(
           fontSize: 26,
           child: Text('and re-run the animation by pressing the button.'),

example/lib/my_spotlight.dart

@@ -26,19 +26,27 @@ class _MySpotlightState extends SpotlightState<MySpotlight> {
     return SpotlightAnt(
       enable: widget.enable,
       index: widget.index,
-      spotlightPadding: EdgeInsets.all(padding),
-      zoomInDuration: Duration(milliseconds: zoomIn.toInt()),
-      zoomOutDuration: Duration(milliseconds: zoomOut.toInt()),
-      bumpDuration: Duration(milliseconds: bump.toInt()),
-      contentFadeInDuration: Duration(milliseconds: fadeIn.toInt()),
+      spotlight: SpotlightConfig(
+        padding: EdgeInsets.all(padding),
+        builder: useCircle ? const SpotlightCircularBuilder() : const SpotlightRectBuilder(),
+        silent: spotlightSilent,
+        usingInkwell: spotlightInkwell,
+      ),
+      duration: SpotlightDurationConfig(
+        zoomIn: Duration(milliseconds: zoomIn.toInt()),
+        zoomOut: Duration(milliseconds: zoomOut.toInt()),
+        bump: Duration(milliseconds: bump.toInt()),
+        contentFadeIn: Duration(milliseconds: fadeIn.toInt()),
+      ),
       bumpRatio: bumpRatio,
-      backdropSilent: backdropSilent,
-      backdropUsingInkwell: backdropInkwell,
-      spotlightSilent: spotlightSilent,
-      spotlightUsingInkwell: spotlightInkwell,
-      spotlightBuilder: useCircle ? const SpotlightCircularBuilder() : const SpotlightRectBuilder(),
-      contentAlignment: alignment,
-      actions: actions,
+      backdrop: SpotlightBackdropConfig(
+        silent: backdropSilent,
+        usingInkwell: backdropInkwell,
+      ),
+      contentLayout: SpotlightContentLayoutConfig(
+        alignment: alignment,
+      ),
+      action: SpotlightActionConfig(enabled: actions),
       onShow: () => _MyDriver.print('onShow'),
       onShown: () => _MyDriver.print('onShown'),
       onDismiss: () => _MyDriver.print('onDismiss'),
@@ -80,7 +88,6 @@ class MyScaffold extends StatelessWidget {
           onFinish?.call();
         },
         onSkip: () => _MyDriver.print('onSkip'),
-        routeObserver: observer,
         child: Builder(builder: (context) {
           final btn = ElevatedButton(
             style: const ButtonStyle(

lib/spotlight_ant.dart

@@ -4,3 +4,8 @@ export 'src/spotlight_show.dart';
 export 'src/spotlights/spotlight_builder.dart';
 export 'src/spotlights/spotlight_circular_builder.dart';
 export 'src/spotlights/spotlight_rect_builder.dart';
+export 'src/configs/spotlight_action_config.dart';
+export 'src/configs/spotlight_backdrop_config.dart';
+export 'src/configs/spotlight_config.dart';
+export 'src/configs/spotlight_content_layout_config.dart';
+export 'src/configs/spotlight_duration_config.dart';

lib/src/configs/spotlight_action_config.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:spotlight_ant/src/spotlight_ant.dart';
+
+class SpotlightActionConfig {
+  /// Ordering actions by [SpotlightAntAction].
+  ///
+  /// send empty list for disabling default actions.
+  final List<SpotlightAntAction> enabled;
+
+  /// Build the actions wrapper.
+  ///
+  /// Default using:
+  /// ```dart
+  /// Positioned(
+  ///   bottom: 16,
+  ///   left: 16,
+  ///   right: 16,
+  ///   child: Row(
+  ///     mainAxisAlignment: MainAxisAlignment.spaceBetween,
+  ///     children: actions.toList(),
+  ///   ),
+  /// );
+  /// ```
+  final Widget Function(BuildContext context, Iterable<Widget> actions)? builder;
+
+  /// Pressed the action widget will go to next spotlight.
+  ///
+  /// Default using:
+  /// ```dart
+  /// IconButton(
+  ///   onPressed: () => prev(),
+  ///   tooltip: 'Next spotlight',
+  ///   color: Colors.white,
+  ///   icon: const Icon(Icons.arrow_forward_ios_sharp),
+  /// );
+  /// ```
+  final Widget? next;
+
+  /// Pressed the action widget will go to previous spotlight.
+  ///
+  /// Default using:
+  /// ```dart
+  /// IconButton(
+  ///   onPressed: () => prev(),
+  ///   tooltip: 'Previous spotlight',
+  ///   color: Colors.white,
+  ///   icon: const Icon(Icons.arrow_back_ios_sharp),
+  /// );
+  /// ```
+  final Widget? prev;
+
+  /// Pressed the action widget will skip all spotlights.
+  ///
+  /// Default using:
+  /// ```dart
+  /// IconButton(
+  ///   onPressed: () => skip(),
+  ///   tooltip: 'Skip spotlight show',
+  ///   color: Colors.white,
+  ///   icon: const Icon(Icons.close_sharp),
+  /// );
+  /// ```
+  final Widget? skip;
+
+  const SpotlightActionConfig({
+    this.enabled = const [SpotlightAntAction.skip],
+    this.builder,
+    this.next,
+    this.prev,
+    this.skip,
+  });
+}

lib/src/configs/spotlight_backdrop_config.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class SpotlightBackdropConfig {
+  /// Set to false will not build backdrop.
+  ///
+  /// Backdrop is use to close the spotlight when tapping anywhere.
+  final bool silent;
+
+  /// Using [InkWell] or [GestureDetector] on backdrop.
+  final bool usingInkwell;
+
+  /// Backdrop inkwell splash color.
+  ///
+  /// Setting null to use default color (control by the app theme).
+  ///
+  /// Only useful when [silent] is false.
+  final Color? splashColor;
+
+  const SpotlightBackdropConfig({
+    this.silent = false,
+    this.usingInkwell = true,
+    this.splashColor,
+  });
+}

lib/src/configs/spotlight_config.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:spotlight_ant/src/spotlights/spotlight_builder.dart';
+import 'package:spotlight_ant/src/spotlights/spotlight_circular_builder.dart';
+import 'package:spotlight_ant/src/spotlights/spotlight_rect_builder.dart';
+
+class SpotlightConfig {
+  /// Building painter for spotlight.
+  ///
+  /// Default is using [SpotlightCircularBuilder].
+  /// You can use [SpotlightRectBuilder] for rectangle.
+  ///
+  /// See also:
+  ///
+  ///  * [SpotlightBuilder], which provide an interface for custom painter.
+  final SpotlightBuilder builder;
+
+  /// Padding of spotlight.
+  final EdgeInsets padding;
+
+  /// Listen `onTap` event on the spotlight to dismiss the tutorial.
+  ///
+  /// Setting true will make it unable to go next when tapping the spotlight.
+  final bool silent;
+
+  /// Using [InkWell] or [GestureDetector] on spotlight.
+  final bool usingInkwell;
+
+  /// Spotlight inkwell splash color.
+  ///
+  /// Setting null to use default color (control by the app theme).
+  ///
+  /// Only useful when [silent] is false.
+  final Color? splashColor;
+
+  const SpotlightConfig({
+    this.builder = const SpotlightCircularBuilder(),
+    this.padding = const EdgeInsets.all(8),
+    this.silent = false,
+    this.usingInkwell = true,
+    this.splashColor,
+  });
+}

lib/src/configs/spotlight_content_layout_config.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+class SpotlightContentLayoutConfig {
+  /// Alignment of content.
+  ///
+  /// Setting null will auto-detected by the center position.
+  final Alignment? alignment;
+
+  /// Prefer content shown in which side.
+  ///
+  /// If set [preferHorizontal] and [preferVertical] set to false,
+  /// it will choose the largest ratio compare to window.
+  ///
+  /// For example, target is at `(0.7 * window_width, 0.4 * window_height)`
+  /// it will align to [Alignment.centerLeft], since
+  /// `|0.7 - 0.5| > |0.4 - 0.5|`
+  ///
+  /// If [preferVertical] set to true, it will choose
+  /// [Alignment.topCenter] or [Alignment.bottomCenter]
+  ///
+  /// If both [preferHorizontal] and [preferVertical] set to true,
+  /// [preferHorizontal] will take the procedure.
+  final ContentPreferLayout prefer;
+
+  const SpotlightContentLayoutConfig({
+    this.alignment,
+    this.prefer = ContentPreferLayout.vertical,
+  });
+}
+
+enum ContentPreferLayout {
+  /// it will choose [Alignment.topCenter] or [Alignment.bottomCenter]
+  vertical,
+
+  /// it will choose [Alignment.centerLeft] or [Alignment.centerRight]
+  horizontal,
+
+  /// it will choose the larger ratio compare to window's ratio
+  ///
+  /// For example, target is at `(0.7 * window_width, 0.4 * window_height)`
+  /// it will align to [Alignment.centerLeft], since
+  /// `|0.7 - 0.5| > |0.4 - 0.5|`
+  largerRatio,
+}
+
+extension PreferLayoutExtension on ContentPreferLayout {
+  bool isPreferHorizontal(double xRatio, double yRatio) {
+    switch (this) {
+      case ContentPreferLayout.horizontal:
+        return true;
+      case ContentPreferLayout.vertical:
+        return false;
+      case ContentPreferLayout.largerRatio:
+        return xRatio.abs() > yRatio.abs();
+    }
+  }
+}

lib/src/configs/spotlight_duration_config.dart

@@ -0,0 +1,31 @@
+class SpotlightDurationConfig {
+  /// Duration for zoom in the spotlight (start).
+  final Duration zoomIn;
+
+  /// Duration for zoom out the spotlight (finish).
+
+  final Duration zoomOut;
+
+  /// Duration for bump forward and reverse.
+  ///
+  /// One cycle of bumping(forward + reverse) will cost 2 * [bump].
+  final Duration bump;
+
+  /// Duration of fading in the content after zoom-in.
+  final Duration contentFadeIn;
+
+  const SpotlightDurationConfig({
+    this.zoomIn = const Duration(milliseconds: 600),
+    this.zoomOut = const Duration(milliseconds: 600),
+    this.bump = const Duration(milliseconds: 500),
+    this.contentFadeIn = const Duration(milliseconds: 200),
+  });
+
+  // All zero, let it easy to test.
+  static const SpotlightDurationConfig zero = SpotlightDurationConfig(
+    zoomIn: Duration.zero,
+    zoomOut: Duration.zero,
+    bump: Duration(milliseconds: 500),
+    contentFadeIn: Duration.zero,
+  );
+}