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, 2023 in Flutter by Ashwini
• 5,430 points
7,639 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(),
  ...
)

To know more, join our Flutter Course today.

answered Apr 10, 2023 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, 2023 in Flutter by vishalini
4,160 views
0 votes
2 answers

How to create a circle icon button in Flutter?

To create something similar to a FloatingActionButton, ...READ MORE

answered Aug 23, 2023 in Flutter by anonymous
• 140 points
14,558 views
0 votes
1 answer

How to dynamically resize text in Flutter?

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

answered Mar 27, 2023 in Flutter by Tej
9,003 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, 2023 in Flutter by anonymous
4,732 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,460 points
3,594 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,460 points
1,149 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,460 points
4,151 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,460 points
765 views
0 votes
1 answer

How to scan for bluetooth printers and print pdf or image via bluetooth in flutter?

The user wants to scan for Bluetooth ...READ MORE

answered Apr 4, 2023 in Flutter by seena
2,263 views
0 votes
1 answer

How to change Android minSdkVersion in Flutter Project?

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

answered Mar 21, 2023 in Flutter by Tej
11,193 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