PageView.builder causes abrupt shaking and crashes when slowly dragging slides

Question

So I'm currently working on a Flutter app where I use PageView.builder to display a series of slides kind of like TikTok but on a horizontal swiping. The slides contain a combination of text, images, and videos. The problem occurs when I slowly drag to preview or see the next slide or have both the slides on the center of viewport where onPageChanged is called. Instead of smoothly transitioning, both the current and next slides abruptly shake or tweak, and sometimes this behavior results into app crashing.

Environment: Flutter version: Flutter (Channel stable, 3.22.2) Device: Samsung Galaxy A34 5G Android 14

What I've Tried:

• I tried adjusting the physics property of the PageView to different ScrollPhysics options (AlwaysScrollableScrollPhysics, ClampingScrollPhysics, etc.), but the shaking persists.
• I tried removing physics and onPageChanged, still the issues persists.
• I checked the widgets in each slide to ensure there were no performance issues.
• I reduced the complexity of each slide by removing images and videos, but the problem still occurs.

Relevant Code: Here is the relevant code snippet:

return PageView.builder(
            itemCount: (state.slides?.length ?? 0) + 1,
            controller: widget.pageController,
            pageSnapping: true,
            physics: state.isNextSlideQuiz
                ? const LeftBlockedScrollPhysics()
                : const AlwaysScrollableScrollPhysics(),
            onPageChanged: (index) {
              if (index < (state.slides?.length ?? 0)) {
                setState(() {
                  playSlideVideo[state.currentPage] = false;
                  playSlideVideo[index] = true;
                });

                if (index <= state.currentPage) {
                  bloc.add(OnPageChanged(indexPage: index, isQuiz: false));
                } else {
                  if (state.slides?[index] != null) {
                    Slide? currentSlide = state.slides?[index];
                    bool? slideHasAnswer = currentSlide?.choice!
                        .any((element) => element.selected ?? false);

                    if (currentSlide?.slideType == "quiz" &&
                        slideHasAnswer == false &&
                        currentSlide?.answer == null) {
                      bloc.add(
                          OnPageChanged(indexPage: index - 1, isQuiz: true));
                    } else {
                      bloc.add(OnPageChanged(indexPage: index, isQuiz: false));
                    }
                  }
                }

                bloc.add(const VideoControls(true));
              } else {
                if (state.fromFavoritesScreen) {
                  Navigator.of(context).popUntil((route) =>
                      route.settings.name == FavoritesPinnedPage.route);
                } else {
                  if (state.slides?[index - 1].slideType == "quiz" &&
                      state.slides?[index - 1].choice!
                              .any((element) => element.selected ?? false) ==
                          false &&
                      state.slides?[index - 1].answer == null) {
                    bloc.add(OnPageChanged(indexPage: index - 1, isQuiz: true));
                  } else {
                    var hasQuiz = state.slides
                        ?.map((e) => e.slideType == "quiz")
                        .toList()
                        .contains(true);

                    setState(() {
                      playSlideVideo[state.currentPage] = false;
                    });

                    bloc.add(SingleLessonCompletedPressed(hasQuiz ?? false));
                  }
                }

                bloc.add(const VideoControls(true));
              }
            },
            itemBuilder: (context, index) {...}