Fix/ Error in console for 403 images for loading the reciters (#1382)

* switch to extended image package to handle exception throw * switch extended image version * Update pubspec.yaml * switch to fast cached library as a temp workaround --------- Co-authored-by: Ibrahim ZEHHAF <97339607+ibrahim-zehhaf-mawaqit@users.noreply.github.com>
mawaqit · Nov 6, 2024 · 11af471 · 11af471
1 parent 17020e7
commit 11af471
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,3 +1,4 @@
+import 'package:fast_cached_network_image/fast_cached_network_image.dart';
 import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -42,6 +43,8 @@ Future<void> main() async {
       await Firebase.initializeApp();
       final directory = await getApplicationDocumentsDirectory();
       Hive.init(directory.path);
+      await FastCachedImageConfig.init(subDir: directory.path, clearCacheAfter: const Duration(days: 60));
+
       tz.initializeTimeZones();
       Hive.registerAdapter(SurahModelAdapter());
       Hive.registerAdapter(ReciterModelAdapter());

diff --git a/lib/src/pages/quran/page/quran_player_screen.dart b/lib/src/pages/quran/page/quran_player_screen.dart
@@ -1,6 +1,6 @@
 import 'dart:math' as math;
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:collection/collection.dart';
+import 'package:fast_cached_network_image/fast_cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
@@ -130,21 +130,33 @@ class _QuranPlayerScreenState extends ConsumerState<QuranPlayerScreen> {
   ClipOval buildReciterImage() {
     return ClipOval(
       child: Container(
-        decoration: BoxDecoration(
-          shape: BoxShape.circle,
-          color: Colors.transparent,
-        ),
-        child: CachedNetworkImage(
-          imageUrl: '${QuranConstant.kQuranReciterImagesBaseUrl}${widget.reciterId}.jpg',
-          fit: BoxFit.fitWidth,
-          placeholder: (context, url) => Container(color: Colors.transparent),
-          errorWidget: (context, url, error) => Container(color: Colors.transparent),
-        ),
-      ),
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: Colors.transparent,
+          ),
+          child: FastCachedImage(
+              url: '${QuranConstant.kQuranReciterImagesBaseUrl}${widget.reciterId}.jpg',
+              fit: BoxFit.fitWidth,
+              loadingBuilder: (context, progress) => Container(color: Colors.transparent),
+              errorBuilder: (context, error, stackTrace) => _buildOfflineImage())),
     );
   }
 }
 
+Widget _buildOfflineImage() {
+  return Center(
+    child: Container(
+      width: 24.w,
+      height: 24.w,
+      padding: EdgeInsets.only(bottom: 2.h),
+      child: Image.asset(
+        R.ASSETS_SVG_RECITER_ICON_PNG,
+        fit: BoxFit.contain,
+      ),
+    ),
+  );
+}
+
 class _QuranPlayer extends ConsumerStatefulWidget {
   const _QuranPlayer({
     super.key,

diff --git a/lib/src/pages/quran/widget/reciter_list_view.dart b/lib/src/pages/quran/widget/reciter_list_view.dart
@@ -1,4 +1,4 @@
-import 'package:cached_network_image/cached_network_image.dart';
+import 'package:fast_cached_network_image/fast_cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -140,12 +140,11 @@ class ReciterCard extends ConsumerWidget {
           fit: StackFit.expand,
           children: [
             // CachedNetworkImage with different sizes for online and offline images
-            CachedNetworkImage(
-              imageUrl: '${QuranConstant.kQuranReciterImagesBaseUrl}${reciter.id}.jpg',
-              fit: BoxFit.cover,
-              placeholder: (context, url) => _buildOfflineImage(), // Use a smaller image
-              errorWidget: (context, url, error) => _buildOfflineImage(), // Use a smaller image on error
-            ),
+            FastCachedImage(
+                url: '${QuranConstant.kQuranReciterImagesBaseUrl}${reciter.id}.jpg',
+                fit: BoxFit.fitWidth,
+                loadingBuilder: (context, progress) => Container(color: Colors.transparent),
+                errorBuilder: (context, error, stackTrace) => _buildOfflineImage()),
             // Gradient overlay
             Container(
               decoration: BoxDecoration(

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -143,6 +143,7 @@ dependencies:
 
   # automatic scrolling
   scroll_to_index: ^3.0.1
+  fast_cached_network_image: ^1.2.0
 
 dev_dependencies:
   flutter_test:
@@ -165,7 +166,6 @@ dev_dependencies:
 dependency_overrides:
   win32: 5.0.5
   rive: ^0.9.1
-
 # The following section is specific to Flutter.
 flutter:
   generate: true