Draggable scroll bar is implemented from commmunity library

mobile/lib/modules/home/views/home_page.dart

@@ -1,15 +1,12 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
 import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
 import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
-import 'package:immich_mobile/shared/models/backup_state.model.dart';
 import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
 import 'package:immich_mobile/modules/home/ui/image_grid.dart';
 import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/providers/backup.provider.dart';
-import 'package:visibility_detector/visibility_detector.dart';
 import 'package:intl/intl.dart';
 
 class HomePage extends HookConsumerWidget {
@@ -21,8 +18,8 @@ class HomePage extends HookConsumerWidget {
     ScrollController _scrollController = useScrollController();
     List<ImmichAssetGroupByDate> assetGroup = ref.watch(assetProvider);
     List<Widget> imageGridGroup = [];
-    List<GlobalKey> monthGroupKey = [];
-    final monthInView = useState<String>("");
+    final scrollLabelText = useState("");
+
     _scrollControllerCallback() {
       var endOfPage = _scrollController.position.maxScrollExtent;
 
@@ -35,13 +32,6 @@ class HomePage extends HookConsumerWidget {
       } else {
         _showBackToTopBtn.value = false;
       }
-
-      // Quick Scroll For Jumping to Month
-      if (_scrollController.position.userScrollDirection == ScrollDirection.forward) {
-        // Scroll UP
-      } else if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
-        // SCroll Down
-      }
     }
 
     useEffect(() {
@@ -55,53 +45,29 @@ class HomePage extends HookConsumerWidget {
       };
     }, []);
 
-    SliverToBoxAdapter _buildMonthGroupTitle(String dateTitle, BuildContext context) {
-      return SliverToBoxAdapter(
-        child: Padding(
-          padding: const EdgeInsets.only(left: 10.0, top: 32),
-          child: Text(
-            DateFormat('MMMM, y').format(
-              DateTime.parse(dateTitle),
-            ),
-            style: TextStyle(
-              fontSize: 24,
-              fontWeight: FontWeight.bold,
-              color: Theme.of(context).primaryColor,
-            ),
-          ),
-        ),
-      );
-    }
-
     SliverToBoxAdapter _buildDateGroupTitle(String dateTitle) {
       var currentYear = DateTime.now().year;
       var groupYear = DateTime.parse(dateTitle).year;
       var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
       var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(dateTitle));
-      var monthText = DateFormat('MMMM, y').format(DateTime.parse(dateTitle));
+
       return SliverToBoxAdapter(
-        child: VisibilityDetector(
-          key: Key(dateText),
-          onVisibilityChanged: (visibilityInfo) {
-            monthInView.value = monthText;
-          },
-          child: Padding(
-            padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
-            child: Row(
-              children: [
-                Padding(
-                  padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
-                  child: Text(
-                    dateText,
-                    style: const TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.bold,
-                      color: Colors.black87,
-                    ),
+        child: Padding(
+          padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
+          child: Row(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
+                child: Text(
+                  dateText,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.black87,
                   ),
                 ),
-              ],
-            ),
+              ),
+            ],
           ),
         ),
       );
@@ -121,58 +87,82 @@ class HomePage extends HookConsumerWidget {
           if ((currentMonth! - previousMonth!) != 0) {
             var monthTitleText = DateFormat('MMMM, y').format(DateTime.parse(dateTitle));
 
-            imageGridGroup.add(_buildMonthGroupTitle(monthTitleText, context));
+            imageGridGroup.add(
+              MonthlyTitleText(monthTitleText: monthTitleText),
+            );
           }
 
           imageGridGroup.add(
             _buildDateGroupTitle(dateTitle),
           );
 
-          imageGridGroup.add(ImageGrid(assetGroup: assetGroup));
+          imageGridGroup.add(
+            ImageGrid(assetGroup: assetGroup),
+          );
 
           lastGroupDate = dateTitle;
         }
       }
 
       return SafeArea(
-        child: Stack(children: [
-          RawScrollbar(
-            minThumbLength: 50,
-            isAlwaysShown: false,
-            interactive: true,
+        child: DraggableScrollbar.semicircle(
+          // labelTextBuilder: (offset) {
+          //   final int currentItem = _scrollController.hasClients
+          //       ? (_scrollController.offset / _scrollController.position.maxScrollExtent * imageGridGroup.length)
+          //           .floor()
+          //       : 0;
+
+          //   if (imageGridGroup[currentItem] is MonthlyTitleText) {
+          //     MonthlyTitleText item = imageGridGroup[currentItem] as MonthlyTitleText;
+
+          //     scrollLabelText.value = item.monthTitleText;
+          //   }
+
+          //   return Text(scrollLabelText.value);
+          // },
+          // labelConstraints: const BoxConstraints.tightFor(width: 200.0, height: 30.0),
+          controller: _scrollController,
+          heightScrollThumb: 40.0,
+          child: CustomScrollView(
             controller: _scrollController,
-            thickness: 50,
-            crossAxisMargin: -20,
-            mainAxisMargin: 70,
-            timeToFade: const Duration(seconds: 2),
-            thumbColor: Colors.blueGrey,
-            radius: const Radius.circular(30),
-            child: CustomScrollView(
-              controller: _scrollController,
-              slivers: [
-                ImmichSliverAppBar(imageGridGroup: imageGridGroup),
-                ...imageGridGroup,
-              ],
-            ),
+            slivers: [
+              ImmichSliverAppBar(imageGridGroup: imageGridGroup),
+              ...imageGridGroup,
+            ],
           ),
-        ]),
+        ),
       );
     }
 
     return Scaffold(
       drawer: const ProfileDrawer(),
       body: _buildBody(),
-      floatingActionButton: _showBackToTopBtn.value
-          ? FloatingActionButton.small(
-              enableFeedback: true,
-              backgroundColor: Theme.of(context).secondaryHeaderColor,
-              foregroundColor: Theme.of(context).primaryColor,
-              onPressed: () {
-                _scrollController.animateTo(0, duration: const Duration(seconds: 1), curve: Curves.easeOutExpo);
-              },
-              child: const Icon(Icons.keyboard_arrow_up_rounded),
-            )
-          : null,
+    );
+  }
+}
+
+class MonthlyTitleText extends StatelessWidget {
+  const MonthlyTitleText({
+    Key? key,
+    required this.monthTitleText,
+  }) : super(key: key);
+
+  final String monthTitleText;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.only(left: 10.0, top: 32),
+        child: Text(
+          monthTitleText,
+          style: TextStyle(
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+            color: Theme.of(context).primaryColor,
+          ),
+        ),
+      ),
     );
   }
 }