How to disable bouncing animation for pageview in flutter

Question

Why do my codes have bouncing animation just for six items, not 7, 8, or 9, here is the full code, I don't want this animation:

  Widget courtsTitle(WidgetRef ref, BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;

    courts = ref.watch(courtProvider).courtsByClubId;

    return SizedBox(
      height: 56,
      child: PageView.builder(
        itemCount: courtLengthCalc(ref),
        scrollDirection: Axis.horizontal,
        controller: pageController,
        physics: const NeverScrollableScrollPhysics(),
        onPageChanged: (value) => setState(() => currentPage = value),
        itemBuilder: (context, index) => Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: List.generate(courtLengthCalc(ref), (index) {
            int currentIndex = (index + currentCoachState());
            return Container(
              width:
                  currentIndex == 0 ? (deviceWidth * 0.21) : deviceWidth * 0.14,
              padding: const EdgeInsets.symmetric(vertical: 10),
              decoration: BoxDecoration(
                border: Border(
                  right: BorderSide(
                      color: Colors.grey, width: currentIndex == 0 ? 0 : 1),
                  top: const BorderSide(color: Colors.grey, width: 1),
                ),
              ),
              child: Center(
                child: Text(
                  courts[currentIndex].name,
                  style: const TextStyle(fontSize: 18),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }

  void nextPage(WidgetRef ref) {
    courts = ref.watch(courtProvider).courtsByClubId;

    if (isForwardCourt) {
      pageController.nextPage(
        duration: const Duration(microseconds: 1),
        curve: Curves.easeInOut,
      );
      currentCoachesNum++;
      courtButtonsChecker++;
    }
    isForwardCourt = courtButtonsChecker * 5 < courts.length;
    isBackCourt = courtButtonsChecker > 1;

    setState(() {});
  }

  void previousPage(WidgetRef ref) {
    if (isBackCourt) {
      pageController.previousPage(
        duration: const Duration(microseconds: 1),
        curve: Curves.easeInOut,
      );

      currentCoachesNum--;
      courtButtonsChecker--;
    }
    isForwardCourt = courtButtonsChecker * 5 < courts.length;
    isBackCourt = courtButtonsChecker > 1;

    setState(() {});
  }

Answer 1

To disable bouncing animation for PageView in Flutter, you can set the physics property of the PageView widget to NeverScrollableScrollPhysics() as you did in your code. This will prevent any scrolling or bouncing animation for the PageView widget.

However, it seems like the bouncing animation you mentioned might be related to the number of items in your PageView. This could be because of the default behavior of PageView where it tries to overscroll to give a visual cue that there are no more items in that direction.

To disable this behavior, you can set the physics property of the PageView widget to ClampingScrollPhysics(). This will prevent overscrolling and bouncing animation, regardless of the number of items in the PageView.

Here's an example of how to set the physics property to ClampingScrollPhysics():

PageView.builder(
  physics: ClampingScrollPhysics(),
  ...
)

To know more, join our Flutter Course today.