Report page list velocity when animating page offset (Resolves #27) (#29)

Author: matthew-carroll

example/lib/main_list.dart

@@ -33,6 +33,9 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
+  static const _pageCount = 20;
+  static const _naturalPageSizeInInches = Size(8.5, 11);
+
   late final PageListViewportController _controller;
 
   @override
@@ -50,51 +53,81 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: PageListViewportGestures(
+      body: Row(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          SizedBox(
+            width: 125,
+            child: _buildThumbnailList(),
+          ),
+          Expanded(
+            child: _buildViewport(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildViewport() {
+    return PageListViewportGestures(
+      controller: _controller,
+      lockPanAxis: true,
+      child: PageListViewport(
         controller: _controller,
-        lockPanAxis: true,
-        child: PageListViewport(
-          controller: _controller,
-          pageCount: 60, //_pageCount,
-          naturalPageSize: const Size(8.5, 11) * 72 * MediaQuery.of(context).devicePixelRatio,
-          pageLayoutCacheCount: 3,
-          pagePaintCacheCount: 3,
-          builder: (BuildContext context, int pageIndex) {
-            return Stack(
-              children: [
-                Positioned.fill(
-                  child: Image.asset(
-                    "assets/test-image.jpeg",
-                    fit: BoxFit.cover,
-                  ),
+        pageCount: _pageCount,
+        naturalPageSize: _naturalPageSizeInInches * 72 * MediaQuery.of(context).devicePixelRatio,
+        pageLayoutCacheCount: 3,
+        pagePaintCacheCount: 3,
+        builder: (BuildContext context, int pageIndex) {
+          return Stack(
+            children: [
+              Positioned.fill(
+                child: _buildPage(pageIndex),
+              ),
+              Center(
+                child: Container(
+                  padding: const EdgeInsets.all(32),
+                  color: Colors.white,
+                  child: Text("Page: $pageIndex"),
                 ),
-                Center(
-                  child: Container(
-                    padding: const EdgeInsets.all(32),
-                    color: Colors.white,
-                    child: Text("Page: $pageIndex"),
-                  ),
-                )
-              ],
-            );
+              )
+            ],
+          );
+        },
+      ),
+    );
+  }
 
-            // return RepaintBoundary(
-            //   key: ValueKey(pageIndex),
-            //   child: Container(
-            //     width: double.infinity,
-            //     height: double.infinity,
-            //     decoration: const BoxDecoration(
-            //       gradient: LinearGradient(
-            //         colors: [Colors.red, Colors.blue],
-            //         begin: Alignment.topLeft,
-            //         end: Alignment.bottomRight,
-            //       ),
-            //     ),
-            //   ),
-            // );
+  Widget _buildThumbnailList() {
+    return RepaintBoundary(
+      child: ColoredBox(
+        color: Colors.grey.shade800,
+        child: ListView.builder(
+          padding: const EdgeInsets.all(16),
+          itemCount: _pageCount,
+          itemBuilder: (context, index) {
+            return Padding(
+              padding: const EdgeInsets.symmetric(vertical: 8),
+              child: GestureDetector(
+                onTap: () {
+                  _controller.animateToPage(index, const Duration(milliseconds: 250));
+                },
+                child: AspectRatio(
+                  aspectRatio: _naturalPageSizeInInches.aspectRatio,
+                  child: _buildPage(index),
+                ),
+              ),
+            );
           },
         ),
       ),
     );
   }
+
+  Widget _buildPage(int pageIndex) {
+    return Image.asset(
+      "assets/test-image.jpeg",
+      fit: BoxFit.cover,
+    );
+  }
 }

lib/src/page_list_viewport.dart

@@ -143,7 +143,18 @@ class PageListViewportController with ChangeNotifier {
 
   void _initController(TickerProvider vsync) {
     _animationController = AnimationController(vsync: vsync) //
-      ..addListener(_onOrientationAnimationChange);
+      ..addListener(_onOrientationAnimationChange)
+      ..addStatusListener((status) {
+        switch (status) {
+          case AnimationStatus.dismissed:
+          case AnimationStatus.completed:
+            _onOrientationAnimationEnd();
+            break;
+          case AnimationStatus.forward:
+          case AnimationStatus.reverse:
+            break;
+        }
+      });
 
     _velocityStopwatch.start();
     _scaleVelocityStopwatch.start();
@@ -352,9 +363,6 @@ class PageListViewportController with ChangeNotifier {
       return Future.value();
     }
 
-    // Stop any on-going orientation animation so we can start a new one.
-    _animationController.stop();
-
     final centerOfPage = _viewport!.calculatePageSize(1.0).center(Offset.zero);
     return animateToOffsetInPage(pageIndex, centerOfPage, duration);
   }
@@ -394,25 +402,10 @@ class PageListViewportController with ChangeNotifier {
         _constrainOriginToViewportBounds(Offset(0, -contentAboveDesiredPage) + desiredPageTopLeftInViewport);
 
     _previousOrigin = _origin;
+    _velocityStopwatch.reset();
     _offsetAnimation = Tween<Offset>(begin: _origin, end: destinationOffset).animate(
       CurvedAnimation(parent: _animationController, curve: curve),
-    )
-      ..addListener(() {
-        _velocity = _offsetAnimation!.value - _previousOrigin;
-        _previousOrigin = _offsetAnimation!.value;
-      })
-      ..addStatusListener((status) {
-        switch (status) {
-          case AnimationStatus.dismissed:
-          case AnimationStatus.completed:
-            _velocity = Offset.zero;
-            break;
-          case AnimationStatus.forward:
-          case AnimationStatus.reverse:
-            // Don't care.
-            break;
-        }
-      });
+    );
 
     _scaleAnimation = Tween<double>(begin: scale, end: desiredZoomLevel).animate(
       CurvedAnimation(parent: _animationController, curve: curve),
@@ -428,6 +421,20 @@ class PageListViewportController with ChangeNotifier {
   void _onOrientationAnimationChange() {
     _origin = _offsetAnimation!.value;
     _scale = _scaleAnimation!.value;
+
+    if (_velocityStopwatch.elapsedMilliseconds > 0) {
+      _velocity = (_offsetAnimation!.value - _previousOrigin) / (_velocityStopwatch.elapsedMilliseconds / 1000);
+      _velocityStopwatch.reset();
+    }
+    _previousOrigin = _offsetAnimation!.value;
+
+    notifyListeners();
+  }
+
+  void _onOrientationAnimationEnd() {
+    _velocity = Offset.zero;
+    _velocityStopwatch.reset();
+
     notifyListeners();
   }