pinch zoom for phones and fix for item list grid view

FEATURE: Added pinch zoom feature using InteractiveViewer class for phones. FIX: manga list items from grid view were not correctly routed to corresponding manga details pages on android. FIX: List items were not routing at all on desktop.
RyanYuuki · Jan 23, 2025 · e2f17f8 · e2f17f8
1 parent 2d00de1
commit e2f17f8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/lib/screens/library/online/manga_list.dart b/lib/screens/library/online/manga_list.dart
@@ -156,7 +156,7 @@ class MangaListContent extends StatelessWidget {
             final posterUrl = item.poster ??
                 'https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx16498-73IhOXpJZiMF.jpg';
             return listItem(
-                context, item, tag, posterUrl, filteredAnimeList, index);
+                context, item, tag, posterUrl, filteredAnimeList, index, true);
           },
         ),
         desktopBuilder: GridView.builder(
@@ -173,7 +173,7 @@ class MangaListContent extends StatelessWidget {
             final posterUrl = item.poster ??
                 'https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx16498-73IhOXpJZiMF.jpg';
             return listItemDesktop(
-                context, item, tag, posterUrl, filteredAnimeList, index);
+                context, item, tag, posterUrl, filteredAnimeList, index, true);
           },
         ),
       ),

diff --git a/lib/screens/library/online/widgets/items.dart b/lib/screens/library/online/widgets/items.dart
@@ -1,5 +1,6 @@
 import 'package:anymex/models/Anilist/anilist_media_user.dart';
 import 'package:anymex/screens/anime/details_page.dart';
+import 'package:anymex/screens/manga/details_page.dart';
 import 'package:anymex/utils/string_extensions.dart';
 import 'package:anymex/widgets/common/glow.dart';
 import 'package:cached_network_image/cached_network_image.dart';
@@ -8,11 +9,17 @@ import 'package:get/get.dart';
 import 'package:iconsax/iconsax.dart';
 
 GestureDetector listItem(BuildContext context, AnilistMediaUser item,
-    String tag, posterUrl, List<dynamic> filteredAnimeList, int index) {
+    String tag, posterUrl, List<dynamic> filteredAnimeList, int index,
+    [bool? isManga]) {
   return GestureDetector(
     onTap: () {
-      Get.to(() => AnimeDetailsPage(
-          anilistId: item.id!, posterUrl: posterUrl, tag: tag));
+      if (isManga != null && isManga) {
+        Get.to(() => MangaDetailsPage(
+            anilistId: item.id!, posterUrl: posterUrl, tag: tag));
+      } else {
+        Get.to(() => AnimeDetailsPage(
+            anilistId: item.id!, posterUrl: posterUrl, tag: tag));
+      }
     },
     child: Column(
       children: [
@@ -112,9 +119,18 @@ GestureDetector listItem(BuildContext context, AnilistMediaUser item,
 }
 
 GestureDetector listItemDesktop(BuildContext context, AnilistMediaUser item,
-    String tag, posterUrl, List<dynamic> filteredAnimeList, int index) {
+    String tag, posterUrl, List<dynamic> filteredAnimeList, int index,
+    [bool? isManga]) {
   return GestureDetector(
-    onTap: () {},
+    onTap: () {
+      if (isManga != null && isManga) {
+        Get.to(() => MangaDetailsPage(
+            anilistId: item.id!, posterUrl: posterUrl, tag: tag));
+      } else {
+        Get.to(() => AnimeDetailsPage(
+            anilistId: item.id!, posterUrl: posterUrl, tag: tag));
+      }
+    },
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [

diff --git a/lib/screens/manga/reading_page.dart b/lib/screens/manga/reading_page.dart
@@ -56,7 +56,9 @@ class _ReadingPageState extends State<ReadingPage> {
   final canGoBackward = true.obs;
   final isLoading = true.obs;
   Timer? _debounce;
-
+  int _pointersCount = 0;
+  final TransformationController _zoomController = TransformationController();
+  double currentScaleValue = 1.0;
   // Settings
   final activeMode = ReadingMode.webtoon.obs;
   final pageWidthMultiplier = 1.0.obs;
@@ -357,10 +359,32 @@ class _ReadingPageState extends State<ReadingPage> {
 
             return Stack(
               children: [
-                if (activeMode.value != ReadingMode.webtoon)
-                  _buildPageViewMode()
+                if (!Platform.isAndroid && !Platform.isIOS)
+                  if (activeMode.value != ReadingMode.webtoon)
+                    _buildPageViewMode()
+                  else
+                    _buildWebtoonMode()
+                else if (activeMode.value != ReadingMode.webtoon)
+                  InteractiveViewer(
+                      boundaryMargin: const EdgeInsets.all(20.0),
+                      minScale: 0.5,
+                      maxScale: 4,
+                      child: _buildPageViewMode())
                 else
-                  _buildWebtoonMode(),
+                  InteractiveViewer(
+                      boundaryMargin: const EdgeInsets.all(20.0),
+                      minScale: 0.5,
+                      maxScale: 4,
+                      transformationController: _zoomController,
+                      onInteractionEnd: (details) {
+                        currentScaleValue =
+                            _zoomController.value.getMaxScaleOnAxis();
+                      },
+                      child: Listener(
+                          onPointerDown: (_) =>
+                              setState(() => _pointersCount++),
+                          onPointerUp: (_) => setState(() => _pointersCount--),
+                          child: _buildWebtoonMode())),
                 _buildTopControls(context),
                 _bottomControls(context),
               ],
@@ -431,7 +455,9 @@ class _ReadingPageState extends State<ReadingPage> {
   SingleChildScrollView _buildWebtoonMode() {
     return SingleChildScrollView(
       controller: scrollController,
-      physics: const BouncingScrollPhysics(),
+      physics: (_pointersCount < 2) || (currentScaleValue > 1)
+          ? const BouncingScrollPhysics()
+          : const NeverScrollableScrollPhysics(),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: mangaPages.map((page) {