Merge pull request #591 from verdigado/211-enhance-news-feed-performance

Draft: 211 Enhance News Perfromance
verdigado · Feb 9, 2025 · a9cc772 · a9cc772
2 parents d1f6e9a + 7f3a858
commit a9cc772
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 5 deletions.
diff --git a/lib/features/news/models/news_model.dart b/lib/features/news/models/news_model.dart
@@ -8,7 +8,7 @@ class NewsModel {
   String summary;
   String content;
   String? author;
-  String? image;
+  ImageSrcSet? image;
   String type;
   Division? division;
   List<NewsCategory> categories;
@@ -37,7 +37,7 @@ class NewsModel {
       summary: news.summary ?? 'Leere Zusammenfassung.',
       content: news.body.content,
       author: null,
-      image: news.featuredImage?.original.url,
+      image: news.featuredImage,
       type: news.categories.firstOrNull?.label ?? '',
       division: division,
       categories: news.categories,

diff --git a/lib/features/news/screens/news_detail_screen.dart b/lib/features/news/screens/news_detail_screen.dart
@@ -1,3 +1,4 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:gruene_app/app/screens/error_screen.dart';
@@ -93,9 +94,11 @@ class NewsDetailScreen extends StatelessWidget {
     );
   }
 
-  Image featuredImage(NewsModel news) {
+  Widget featuredImage(NewsModel news) {
     if (news.image != null) {
-      return Image.network(news.image!);
+      return CachedNetworkImage(
+        imageUrl: selectImageVariant(news.image!, 'wide'),
+      );
     }
     return Image.asset(getPlaceholderImage(news.id));
   }

diff --git a/lib/features/news/utils/utils.dart b/lib/features/news/utils/utils.dart
@@ -24,3 +24,12 @@ bool isCustomFilterSelected(
 String getPlaceholderImage(String id) {
   return 'assets/graphics/placeholders/placeholder_${int.parse(id) % 3 + 1}.jpg';
 }
+
+String selectImageVariant(ImageSrcSet image, String type) {
+  for (var variant in image.srcset) {
+    if (variant.type == type) {
+      return variant.url;
+    }
+  }
+  return image.original.url;
+}
diff --git a/lib/features/news/widgets/news_card.dart b/lib/features/news/widgets/news_card.dart
@@ -1,3 +1,4 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:gruene_app/app/theme/theme.dart';
@@ -136,7 +137,9 @@ class NewsCard extends StatelessWidget {
 
   DecorationImage featuredImage(NewsModel news) {
     return DecorationImage(
-      image: news.image != null ? NetworkImage(news.image!) : AssetImage(getPlaceholderImage(news.id)),
+      image: news.image != null
+          ? CachedNetworkImageProvider(selectImageVariant(news.image!, 'large'))
+          : AssetImage(getPlaceholderImage(news.id)),
       fit: BoxFit.fitWidth,
     );
   }

diff --git a/pubspec.lock b/pubspec.lock
@@ -150,6 +150,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.9.2"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
+  cached_network_image_platform_interface:
+    dependency: transitive
+    description:
+      name: cached_network_image_platform_interface
+      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  cached_network_image_web:
+    dependency: transitive
+    description:
+      name: cached_network_image_web
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   carousel_slider_plus:
     dependency: "direct main"
     description:
@@ -395,6 +419,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.1.6"
+  flutter_cache_manager:
+    dependency: transitive
+    description:
+      name: flutter_cache_manager
+      sha256: "400b6592f16a4409a7f2bb929a9a7e38c72cceb8ffb99ee57bbf2cb2cecf8386"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
   flutter_dotenv:
     dependency: "direct main"
     description:
@@ -1012,6 +1044,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  octo_image:
+    dependency: transitive
+    description:
+      name: octo_image
+      sha256: "34faa6639a78c7e3cbe79be6f9f96535867e879748ade7d17c9b1ae7536293bd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   package_config:
     dependency: transitive
     description:
@@ -1204,6 +1244,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  rxdart:
+    dependency: transitive
+    description:
+      name: rxdart
+      sha256: "5c3004a4a8dbb94bd4bf5412a4def4acdaa12e12f269737a5751369e12d1a962"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.28.0"
   shelf:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -65,6 +65,7 @@ dependencies:
   simple_animations: ^5.0.2
   carousel_slider_plus: ^7.1.0
   flutter_file_dialog: ^3.0.2
+  cached_network_image: ^3.4.1
 
 dev_dependencies: