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>
pull/2866/head
Niaz Sagor 3 days ago committed by GitHub
parent 5f4c795695
commit 8da6d98439
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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,
),
);
}
}

Loading…
Cancel
Save