Search code examples
androidflutter

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 users only to wait this slow animation to completely stop , they can drag the internal ListView.I feel that the user experience is worse than native android ViewPager.Hoping a perfect solution.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/reactive_page_view/reactive_page_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page(),
    );
  }
}

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

PageView view;

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text("Demo"),
      ),
      body: PageView.builder(
          physics: BouncingScrollPhysics(),
          itemCount: 3,
          itemBuilder: (context, index) {
            return ItemPage();
          }),
    );
  }
}

class ItemPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        physics: BouncingScrollPhysics(),
        itemCount: 30,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('这是第$index', style: TextStyle(fontSize: 30)),
          );
        });
  }
}



Solution

  • 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