feat: display cover image on tap

d-reader-organization · May 6, 2024 · b94e8ca · b94e8ca
1 parent 3286213
commit b94e8ca
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 16 deletions.
diff --git a/lib/constants/routes.dart b/lib/constants/routes.dart
@@ -13,6 +13,7 @@ class RoutePath {
   static const comicDetails = 'comic-details';
   static const comicDetailsInfo = 'comic-details-info';
   static const comicIssueDetails = 'comic-issue';
+  static const comicIssueCover = 'comic-issue-cover';
   static const creatorDetails = 'creator-details';
   static const eReader = 'e-reader';
   static const profile = 'profile';

diff --git a/lib/features/comic_issue/presentation/screens/comic_issue_cover.dart b/lib/features/comic_issue/presentation/screens/comic_issue_cover.dart
@@ -0,0 +1,48 @@
+import 'package:d_reader_flutter/constants/constants.dart';
+import 'package:d_reader_flutter/shared/theme/app_colors.dart';
+import 'package:d_reader_flutter/shared/widgets/image_widgets/cached_image_bg_placeholder.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class ComicIssueCoverScreen extends StatelessWidget {
+  final String imageUrl;
+  const ComicIssueCoverScreen({
+    super.key,
+    required this.imageUrl,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: ColorPalette.appBackgroundColor,
+        leading: GestureDetector(
+          onTap: () {
+            context.pop();
+          },
+          child: const Icon(
+            Icons.close,
+            size: 24,
+            color: Colors.white,
+          ),
+        ),
+      ),
+      backgroundColor: ColorPalette.appBackgroundColor,
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16),
+          child: InteractiveViewer(
+            minScale: 1,
+            maxScale: 5,
+            child: AspectRatio(
+              aspectRatio: comicIssueAspectRatio,
+              child: CachedImageBgPlaceholder(
+                imageUrl: imageUrl,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/features/comic_issue/presentation/screens/comic_issue_details.dart b/lib/features/comic_issue/presentation/screens/comic_issue_details.dart
@@ -172,7 +172,8 @@ class _ComicIssueDetailsState extends ConsumerState<ComicIssueDetails>
                               onTap: () {
                                 nextScreenPush(
                                   context: context,
-                                  path: '${RoutePath.eReader}/${issue.id}',
+                                  path: RoutePath.comicIssueCover,
+                                  extra: issue.cover,
                                 );
                               },
                               child: Column(

diff --git a/lib/features/comic_issue/presentation/widgets/tabs/about/rarities.dart b/lib/features/comic_issue/presentation/widgets/tabs/about/rarities.dart
@@ -1,9 +1,12 @@
+import 'package:d_reader_flutter/constants/routes.dart';
 import 'package:d_reader_flutter/shared/domain/models/enums.dart';
 import 'package:d_reader_flutter/shared/domain/models/stateless_cover.dart';
 import 'package:d_reader_flutter/features/nft/presentation/utils/extensions.dart';
+import 'package:d_reader_flutter/shared/utils/screen_navigation.dart';
 import 'package:d_reader_flutter/shared/widgets/image_widgets/cached_image_bg_placeholder.dart';
 import 'package:d_reader_flutter/shared/widgets/unsorted/rarity.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 
 class RaritiesWidget extends StatelessWidget {
   final List<StatelessCover> covers;
@@ -25,10 +28,19 @@ class RaritiesWidget extends StatelessWidget {
             padding: const EdgeInsets.only(right: 16),
             child: Column(
               children: [
-                CachedImageBgPlaceholder(
-                  imageUrl: covers[index].image,
-                  width: 137,
-                  height: 197,
+                GestureDetector(
+                  onTap: () {
+                    nextScreenPush(
+                      context: context,
+                      path: RoutePath.comicIssueCover,
+                      extra: covers[index].image,
+                    );
+                  },
+                  child: CachedImageBgPlaceholder(
+                    imageUrl: covers[index].image,
+                    width: 137,
+                    height: 197,
+                  ),
                 ),
                 const SizedBox(
                   height: 16,

diff --git a/lib/features/nft/presentation/screens/nft_details.dart b/lib/features/nft/presentation/screens/nft_details.dart
@@ -98,7 +98,7 @@ class NftDetails extends ConsumerWidget {
                   padding:
                       const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                   sliver: SliverToBoxAdapter(
-                    child: NfTCard(
+                    child: NftCard(
                       comicName: nft.comicName,
                       imageUrl: nft.image,
                       issueName: nft.comicIssueName,

diff --git a/lib/features/nft/presentation/utils/extensions.dart b/lib/features/nft/presentation/utils/extensions.dart
@@ -18,8 +18,8 @@ extension RarityExtension on NftRarity {
     NftRarity.none: Colors.transparent,
     NftRarity.common: Colors.white,
     NftRarity.uncommon: ColorPalette.dReaderYellow200,
-    NftRarity.rare: Color(0xFF3926B4),
-    NftRarity.epic: Color(0xFFC413E0),
+    NftRarity.rare: ColorPalette.dReaderLightGreen,
+    NftRarity.epic: ColorPalette.dReaderPink,
     NftRarity.legendary: Color(0xFF8377F2),
   };
 

diff --git a/lib/features/nft/presentation/widgets/nft_card.dart b/lib/features/nft/presentation/widgets/nft_card.dart
@@ -1,11 +1,14 @@
+import 'package:d_reader_flutter/constants/constants.dart';
+import 'package:d_reader_flutter/constants/routes.dart';
+import 'package:d_reader_flutter/shared/utils/screen_navigation.dart';
 import 'package:d_reader_flutter/shared/widgets/image_widgets/cached_image_bg_placeholder.dart';
 import 'package:flutter/material.dart';
 
-class NfTCard extends StatelessWidget {
+class NftCard extends StatelessWidget {
   final String imageUrl;
   final String comicName;
   final String issueName;
-  const NfTCard({
+  const NftCard({
     super.key,
     required this.imageUrl,
     required this.comicName,
@@ -14,12 +17,27 @@ class NfTCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AspectRatio(
-      aspectRatio: 1000 / 688,
-      child: CachedImageBgPlaceholder(
-        imageUrl: imageUrl,
-        bgImageFit: BoxFit.scaleDown,
-        placeholder: const SizedBox(),
+    return GestureDetector(
+      onTap: () {
+        nextScreenPush(
+          context: context,
+          path: RoutePath.comicIssueCover,
+          extra: imageUrl,
+        );
+      },
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(
+          maxWidth: 232,
+          maxHeight: 338,
+        ),
+        child: AspectRatio(
+          aspectRatio: comicIssueAspectRatio,
+          child: CachedImageBgPlaceholder(
+            imageUrl: imageUrl,
+            bgImageFit: BoxFit.scaleDown,
+            placeholder: const SizedBox(),
+          ),
+        ),
       ),
     );
   }

diff --git a/lib/routing/router.dart b/lib/routing/router.dart
@@ -1,6 +1,7 @@
 import 'package:d_reader_flutter/features/authentication/presentation/screens/sign_in/sign_in.dart';
 import 'package:d_reader_flutter/features/authentication/presentation/screens/sign_up/sign_up.dart';
 import 'package:d_reader_flutter/features/authentication/presentation/screens/verify_email.dart';
+import 'package:d_reader_flutter/features/comic_issue/presentation/screens/comic_issue_cover.dart';
 import 'package:d_reader_flutter/features/library/presentation/providers/owned/owned_providers.dart';
 import 'package:d_reader_flutter/features/nft/domain/models/nft.dart';
 import 'package:d_reader_flutter/features/settings/presentation/screens/security_and_privacy.dart';
@@ -163,6 +164,13 @@ List<GoRoute> generateHomeRoutes(ProviderRef ref) {
           redirect: (context, state) =>
               '/${RoutePath.comicIssueDetails}/${state.pathParameters['id']}',
         ),
+        GoRoute(
+          path: RoutePath.comicIssueCover,
+          builder: (context, state) {
+            final String imageUrl = state.extra as String;
+            return ComicIssueCoverScreen(imageUrl: imageUrl);
+          },
+        ),
         GoRoute(
           path: '${RoutePath.creatorDetails}/:slug',
           builder: (context, state) {

diff --git a/lib/shared/theme/app_colors.dart b/lib/shared/theme/app_colors.dart
@@ -15,6 +15,8 @@ class ColorPalette {
   static const Color dReaderOrange = Color(0xFFE9A860);
   static const Color dReaderBlue = Color(0xFF0079BF);
   static const Color dReaderError = Color(0xFFEE7B4F);
+  static const Color dReaderPink = Color(0xFFFF769F);
+  static const Color dReaderLightGreen = Color(0xFF7AEB21);
 
   static const Color someGreyColor = Color(0xFFB9B9B9);