From 8da6d98439a0459ab26c3bf49ebcd3fbecbc5495 Mon Sep 17 00:00:00 2001
From: Niaz Sagor <50655067+NiazSagor@users.noreply.github.com>
Date: Sat, 20 Jun 2026 03:13:45 +0600
Subject: [PATCH] Show placeholder for broken activity images (#2769)

Hello, I noticed that there are several image URLs that fail to load on
the Activities screen of the compass_app. The image shows the default
error widget right now.
This PR proposes to display a placeholder with a "broken image" icon
instead of the default error widget. This provides better visual
feedback to the user.

Current:
<img width="354" height="275" alt="image"
src="https://github.com/user-attachments/assets/3688e1a0-c36d-40ef-9474-001e3576d55a"
/>

After fix:
<img width="354" height="275" alt="image"
src="https://github.com/user-attachments/assets/0f853596-6b9c-4b82-b646-8a3cf01c6ad0"
/>

@ericwindmill, please take a look and see if it is appropriate.

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I have added sample code updates to the [changelog].
- [x] I updated/added relevant documentation (doc comments with `///`).


<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md
[CLA]: https://cla.developers.google.com/
[Discord]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md
[changelog]: ../CHANGELOG.md

Co-authored-by: Eric Windmill <eric@ericwindmill.com>
---
 .../ui/activities/widgets/activity_entry.dart | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/compass_app/app/lib/ui/activities/widgets/activity_entry.dart b/compass_app/app/lib/ui/activities/widgets/activity_entry.dart
index 300e560a7..f75643f18 100644
--- a/compass_app/app/lib/ui/activities/widgets/activity_entry.dart
+++ b/compass_app/app/lib/ui/activities/widgets/activity_entry.dart
@@ -30,6 +30,7 @@ class ActivityEntry extends StatelessWidget {
           ClipRRect(
             borderRadius: BorderRadius.circular(8),
             child: CachedNetworkImage(
+              errorWidget: (context, url, error) => _ActivityErrorPlaceholder(),
               imageUrl: activity.imageUrl,
               height: 80,
               width: 80,
@@ -66,3 +67,23 @@ class ActivityEntry extends StatelessWidget {
     );
   }
 }
+
+class _ActivityErrorPlaceholder extends StatelessWidget {
+  const _ActivityErrorPlaceholder({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 80,
+      height: 80,
+      decoration: BoxDecoration(
+        color: Colors.grey[200],
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Icon(
+        Icons.broken_image_outlined,
+        color: Theme.of(context).colorScheme.onSurfaceVariant,
+      ),
+    );
+  }
+}