How to disable bouncing animation for pageview in flutter

0 votes

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(() {});
  }

Apr 10 in Flutter by Ashwini
• 5,380 points
353 views

1 answer to this question.

0 votes

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(),
  ...
)

answered Apr 10 by Anitha

Related Questions In Flutter

0 votes
1 answer

How to implement drop down list in flutter?

You're close! The error you're getting is ...READ MORE

answered Mar 26 in Flutter by vishalini
313 views
0 votes
1 answer

How to create a circle icon button in Flutter?

To create a circle icon button in ...READ MORE

answered Mar 27 in Flutter by Tanishqa
• 1,000 points
1,327 views
0 votes
1 answer

How to dynamically resize text in Flutter?

You can use the FittedBox widget to ...READ MORE

answered Mar 27 in Flutter by Tej
221 views
0 votes
1 answer

How to present an empty view in flutter?

In Flutter, you can present an empty ...READ MORE

answered Mar 27 in Flutter by anonymous
100 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
2,757 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
570 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,430 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,440 points
340 views
0 votes
1 answer
0 votes
1 answer

How to change Android minSdkVersion in Flutter Project?

Yes, you can change the minSdkVersion in ...READ MORE

answered Mar 21 in Flutter by Tej
337 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP