In Flutter How To Make Pageview Scroll Faster? The Animation Seems To Be Slow And The Inner Listview Cant Response My Vertical Gesture

you can see the details in video I don't know how to work out this problem.Compared with Android Native ViewPager,the animation of the PageView in Flutter seems to be slower and us

Solution 1:

You can define your own instance of PageController and use its methods nextPage() and previousPage(). They have "duration" argument that controls how fast the page view scrolls.

final PageController controller = PageController(
    viewportFraction: 0.9,
  );

  voidnextPage() async {
    await controller.nextPage(
      duration: Duration(milliseconds: 200),
      curve: Curves.easeOut,
    );
  }

  voidprevPage() async {
    await controller.previousPage(
      duration: Duration(milliseconds: 200),
      curve: Curves.easeOut,
    );
  }

Then apply this controller to your Page View:

return PageView.builder(
      physics: NeverScrollableScrollPhysics(),
      controller: controller,
      ...
    );

The full code of main.dart:

import'package:flutter/material.dart';voidmain() {
  runApp(MyApp());
}

classMyAppextendsStatelessWidget {
  @overrideWidgetbuild(BuildContextcontext) {
    returnMaterialApp(theme:ThemeData(primarySwatch:Colors.blue,
        visualDensity:VisualDensity.adaptivePlatformDensity,
      ),
      home:MyPageViewExample(),
    );
  }
}

classMyPageViewExampleextendsStatelessWidget {
  MyPageViewExample({Keykey}):super(key:key);finalPageControllercontroller=PageController(viewportFraction:0.9,
  );voidnextPage()async {
    awaitcontroller.nextPage(duration:Duration(milliseconds:200),
      curve:Curves.easeOut,
    );
  }

  voidprevPage()async {
    awaitcontroller.previousPage(duration:Duration(milliseconds:200),
      curve:Curves.easeOut,
    );
  }

  @overrideWidgetbuild(BuildContextcontext) {
    returnScaffold(body:Stack(children:<Widget>[
          Container(color:Colors.grey[100],
          ),
          Padding(padding:EdgeInsets.only(top:20.0+MediaQuery.of(context).padding.top, bottom:20.0),
            child:_buildCarousel(context),
          ),
        ],
      ),
    );
  }

  Widget_buildCarousel(BuildContextcontext) {
    returnPageView.builder(physics:NeverScrollableScrollPhysics(),
      controller:controller,
      scrollDirection:Axis.horizontal,
      itemBuilder:(BuildContextcontext, intitemIndex) {
        return_buildItem(context, itemIndex);
      },
      itemCount:5,
    );
  }

  Widget_buildItem(BuildContextcontext, intitemIndex) {
    returnPadding(padding:EdgeInsets.only(left:4.0, top:10.0, right:4.0, bottom:10.0),
      child:GestureDetector(onPanUpdate:(details) {
          if(details.delta.dx<0) {
            nextPage();
          }
          if(details.delta.dx>0) {
            prevPage();
          }
        },
        child:Container(decoration:BoxDecoration(color:Colors.white,
            borderRadius:BorderRadius.all(Radius.circular(35.0)),
          ),
          child:Center(child:Text('Item '+(itemIndex+1).toString(),
            ),
          ),
        ),
      ),
    );
  }
}

Solution 2:

You can control the general physics of the scroll animation.

PageView(
  physics: CustomPageViewScrollPhysics(),
            

Control the scroll behavior:

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics? parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor)!);
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 50,
        stiffness: 100,
        damping: 0.8,
      );
}

You should also be able to calculate the duration with mass, stiffness, damping, but I believe having those options is even better suited for your problem. Source