How to implement controlled scroll behavior with a glowing effect in Flutter?

Question

I'm working on a Flutter app where users can scroll between categories by pulling up or down. My implementation allows switching categories when the user performs a "hard pull." However, I have two main issues:

1. The scrolling transition happens too quickly. I want to control the scroll speed for a smoother transition.
2. I need to add a glowing effect during the pull-down or pull-up, similar to the effect in the original design shown in the video.

I’m currently using a NotificationListener to detect overscroll and move between categories. Here's the relevant part of my code:

---

My Code:

void moveToNextCategory() {
  if (!isScrolling && selectedTabIndex < tabs.length - 1) {
    setState(() {
      isScrolling = true;
      selectedTabIndex++;
    });
    Future.delayed(const Duration(milliseconds: 300), () {
      isScrolling = false; // Reset scrolling flag
    });
  }
}

void moveToPreviousCategory() {
  if (!isScrolling && selectedTabIndex > 0) {
    setState(() {
      isScrolling = true;
      selectedTabIndex--;
    });
    Future.delayed(const Duration(milliseconds: 300), () {
      isScrolling = false; // Reset scrolling flag
    });
  }
}

void showTopGlow() {
  setState(() {
    isTopGlowVisible = true;
  });
}

void showBottomGlow() {
  setState(() {
    isBottomGlowVisible = true;
  });
}

void hideGlow() {
  setState(() {
    isTopGlowVisible = false;
    isBottomGlowVisible = false;
  });
}

In the NotificationListener, I'm checking for overscroll events and triggering the category change or glow as follows:

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification scroll) {
    const double hardPullThreshold = 50.0; // Threshold for hard pull velocity

    if (scroll is OverscrollNotification) {
      if (scroll.overscroll > 0 &&
          scroll.metrics.pixels == scroll.metrics.maxScrollExtent) {
        showBottomGlow(); // Show custom glow
        if (scroll.dragDetails?.primaryDelta != null &&
            scroll.dragDetails!.primaryDelta!.abs() < hardPullThreshold) {
          moveToNextCategory();
        }
      } else if (scroll.overscroll < 0 &&
          scroll.metrics.pixels == scroll.metrics.minScrollExtent) {
        showTopGlow(); // Show custom glow
        if (scroll.dragDetails?.primaryDelta != null &&
            scroll.dragDetails!.primaryDelta!.abs() < hardPullThreshold) {
          moveToPreviousCategory();
        }
      }
    } else if (scroll is ScrollEndNotification) {
      hideGlow(); // Hide glow when scrolling stops
    }
    return false; // Allow default behavior
  },
)

---

What I Want:

1. Controlled Scrolling: The scroll transition should be smoother and not feel "too fast."
2. Glowing Effect: The glow should look more natural and consistent with the original effect in the video.

---

What I’ve Tried:

• Adjusted the Duration in Future.delayed, but this didn’t feel smooth.
• Tried creating a custom glow widget (CustomGlowIndicator), but it still doesn’t look as good as the effect in the original design.

---

Videos:

• Desired UI: Imgur
• Current Implementation: Imgur

---

Specific Questions:

1. How can I control the scroll speed to make the transition smoother?
2. How can I create a glowing effect similar to the one in the desired UI?

---