Issues with buttons not working when overlaying together with a ReorderableList

[djpirra]

For some reason, all my screens work well with ShowCaseView except the ones that use a ReorderableList...

[djpirra]

The code I currently use on main:

if (!_showcaseViewRegistered) {
      ShowcaseView.register(
        // Enable auto-scroll so showcaseview can scroll to widgets that are off-screen
        enableAutoScroll: true,
        scrollDuration: const Duration(milliseconds: 300),
        onStart: (showcaseIndex, key) {
          debugPrint('ShowcaseView: onStart called for showcase index: $showcaseIndex');
          final currentContainer = _container;
          if (currentContainer != null) {
            final state = currentContainer.read(walkthroughStateProvider);
            if (state.isActive) {
              debugPrint('ShowcaseView: Current state - stepIndex: ${state.currentStepIndex}, totalSteps: ${state.totalSteps}');
            }
          }
        },
        // Track when showcases complete - mark the step as shown
        onComplete: (showcaseIndex, key) async {
          debugPrint('ShowcaseView: onComplete called for showcase index: $showcaseIndex, key: $key');
          final currentContainer = _container;
          if (currentContainer != null) {
            final state = currentContainer.read(walkthroughStateProvider);
            if (state.isActive && state.currentSectionId != null) {
              // Find the step that corresponds to this showcase index
              // We need to map showcase index to step (accounting for center-positioned steps with no targetKey)
              int stepIndex = 0;
              int showcaseCount = 0;
              for (int i = 0; i < state.steps.length; i++) {
                if (state.steps[i].targetKey != null) {
                  if (showcaseCount == showcaseIndex) {
                    stepIndex = i;
                    break;
                  }
                  showcaseCount++;
                }
              }
              
              final step = state.steps[stepIndex];
              debugPrint('ShowcaseView: Marking step ${step.id} as shown for section ${state.currentSectionId}');
              
              // Mark this step as shown
              await WalkthroughService.instance.markStepShown(
                state.currentSectionId!,
                step.id,
              );
            }
          }
        },
        // When all showcases are finished, complete the walkthrough
        onFinish: () async {
          debugPrint('ShowcaseView: onFinish called - all showcases completed');
          final currentContainer = _container;
          if (currentContainer != null) {
            final state = currentContainer.read(walkthroughStateProvider);
            if (state.isActive && state.currentSectionId != null) {
              final sectionId = state.currentSectionId!;
              
              // Only mark steps that were actually shown (not already marked)
              // Check which steps have already been marked as shown
              final shownSteps = await WalkthroughService.instance.getShownSteps(sectionId);
              
              // Mark only center-positioned steps (without targetKey) that weren't already marked
              // These steps don't trigger onComplete, so we need to mark them here
              for (final step in state.steps) {
                if (step.targetKey == null && !shownSteps.contains(step.id)) {
                  debugPrint('ShowcaseView: Marking center-positioned step ${step.id} as shown');
                  await WalkthroughService.instance.markStepShown(sectionId, step.id);
                }
              }
              
              // Complete the walkthrough (will mark section as completed if all steps shown)
              final notifier = currentContainer.read(walkthroughStateProvider.notifier);
              await notifier.completeWalkthrough();
            }
          }
        },
      );
      _showcaseViewRegistered = true;
    }