fix(UI/UX): more precise jump to selected article

casimir · Nov 6, 2024 · 570ff70 · 570ff70
1 parent a69bfcd
commit 570ff70
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/lib/pages/articles/article_list.dart b/lib/pages/articles/article_list.dart
@@ -17,12 +17,16 @@ class ArticleListView extends ConsumerStatefulWidget {
     required this.doRefresh,
     required this.onItemSelect,
     required this.sideBySideMode,
+    this.headerOffset = 0,
+    this.indexOffset = 1,
   });
 
   final ScrollController? controller;
   final Future<void> Function() doRefresh;
   final void Function(int articleId)? onItemSelect;
   final bool sideBySideMode;
+  final double headerOffset;
+  final int indexOffset;
 
   @override
   ConsumerState<ArticleListView> createState() => _ArticleListState();
@@ -31,6 +35,17 @@ class ArticleListView extends ConsumerStatefulWidget {
 class _ArticleListState extends ConsumerState<ArticleListView> {
   late final ScrollController _scroller;
 
+  double _computePixelsToScroll(int scrollToIndex) {
+    final targetIndex = scrollToIndex - widget.indexOffset;
+    final itemPixels = targetIndex * listingHeight;
+    final separatorsPixels = targetIndex.abs() * 16.0; // default Divider height
+    final targetPixels = (itemPixels + separatorsPixels - widget.headerOffset);
+    return targetPixels.clamp(
+      -1, // NestedScrollView wants a negative to work as expected
+      _scroller.position.maxScrollExtent,
+    );
+  }
+
   @override
   void initState() {
     super.initState();
@@ -47,7 +62,7 @@ class _ArticleListState extends ConsumerState<ArticleListView> {
               .indexOf(article!.id, query);
           if (scrollToIndex != null) {
             WidgetsBinding.instance.addPostFrameCallback((_) {
-              _scroller.jumpTo(scrollToIndex * listingHeight);
+              _scroller.jumpTo(_computePixelsToScroll(scrollToIndex));
             });
           }
         }

diff --git a/lib/pages/articles/listing.dart b/lib/pages/articles/listing.dart
@@ -68,6 +68,7 @@ class _ListingPageState extends ConsumerState<ListingPage> {
                 doRefresh: () => doRefresh(),
                 onItemSelect: widget.onItemSelect,
                 sideBySideMode: widget.sideBySideMode,
+                headerOffset: 122.0, // height of SearchBarWithFilters
               );
             }),
           ),