Replace custom image loading with cached_network_image

lib/components/autocomplete.dart

@@ -1,6 +1,6 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/models/chat_mode.dart';
 import 'package:rtchat/models/commands.dart';
 import 'package:rtchat/models/messages.dart';
@@ -117,7 +117,9 @@ class _AutocompleteWidgetState extends State<AutocompleteWidget> {
                                 width: 24,
                                 height: 24,
                                 filterQuality: FilterQuality.medium,
-                                image: ResilientNetworkImage(emote.uri),
+                                image: CachedNetworkImageProvider(
+                                  emote.uri.toString(),
+                                ),
                               ),
                             );
                           })

lib/components/channel_search_results.dart

@@ -1,11 +1,11 @@
 import 'dart:async';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/api.dart';
 import 'package:rtchat/components/image/cross_fade_image.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/components/provider_icon.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/channels.dart';
@@ -262,7 +262,8 @@ class SearchResult {
     required this.language,
   });
 
-  ResilientNetworkImage get image => ResilientNetworkImage(imageUrl);
+  CachedNetworkImageProvider get image =>
+      CachedNetworkImageProvider(imageUrl.toString());
 
   Channel get channel => Channel(provider, channelId, displayName);
 }
@@ -463,7 +464,7 @@ class _ChannelSearchResultsWidgetState
             ClipRRect(
               borderRadius: BorderRadius.circular(24),
               child: CrossFadeImage(
-                placeholder: result.image.placeholderImage,
+                placeholder: MemoryImage(kTransparentImage),
                 image: result.image,
                 height: 48,
                 width: 48,

lib/components/chat_history/decorated_event.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/image/cross_fade_image.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/models/style.dart';
 
 class DecoratedEventWidget extends StatelessWidget {

lib/components/chat_history/kick/events.dart

@@ -1,7 +1,7 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/kick/event.dart';
 import 'package:rtchat/models/messages/kick/user.dart';
@@ -32,7 +32,7 @@ Widget _decorated(KickUserModel? user, IconData icon, Widget child) {
   final picture = user?.profilePictureUrl;
   if (picture != null) {
     return DecoratedEventWidget.avatar(
-      avatar: ResilientNetworkImage(Uri.parse(picture)),
+      avatar: CachedNetworkImageProvider(picture),
       child: child,
     );
   }

lib/components/chat_history/tokens.dart

@@ -1,7 +1,7 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/models/layout.dart';
 import 'package:rtchat/models/messages/tokens.dart';
 import 'package:rtchat/models/style.dart';
@@ -48,7 +48,7 @@ Iterable<InlineSpan> renderToken(
         preferBelow: false,
         child: Image(
           height: styleModel.fontSize,
-          image: ResilientNetworkImage(token.url),
+          image: CachedNetworkImageProvider(token.url.toString()),
           errorBuilder: (context, error, stackTrace) => Text(token.code),
         ),
       ),

lib/components/chat_history/twitch/badge.dart

@@ -1,6 +1,6 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/models/messages/twitch/badge.dart';
 
 class TwitchBadgeWidget extends StatelessWidget {
@@ -36,7 +36,10 @@ class TwitchBadgeWidget extends StatelessWidget {
             }
             return Padding(
               padding: const EdgeInsets.only(right: 5),
-              child: Image(image: ResilientNetworkImage(url), height: height),
+              child: Image(
+                image: CachedNetworkImageProvider(url.toString()),
+                height: height,
+              ),
             );
           }
         }

lib/components/chat_history/twitch/cheer_event.dart

@@ -1,6 +1,6 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/twitch/event.dart';
 import 'package:styled_text/styled_text.dart';
@@ -30,7 +30,9 @@ class TwitchCheerEventWidget extends StatelessWidget {
             ? AppLocalizations.of(context)!.anonymous
             : model.giverName ?? AppLocalizations.of(context)!.anonymous;
     return DecoratedEventWidget.avatar(
-      avatar: ResilientNetworkImage(getCorrespondingImageUrl(model.bits)),
+      avatar: CachedNetworkImageProvider(
+        getCorrespondingImageUrl(model.bits).toString(),
+      ),
       child: StyledText(
         text: AppLocalizations.of(
           context,

lib/components/chat_history/twitch/follow_event.dart

@@ -1,9 +1,9 @@
 import 'dart:math';
 
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/twitch/event.dart';
 import 'package:rtchat/models/style.dart';
@@ -56,8 +56,8 @@ class _TwitchFollowEventWidgetState extends State<TwitchFollowEventWidget> {
                       : followers
                           .take(min(3, followers.length))
                           .map(
-                            (follower) => ResilientNetworkImage(
-                              follower.profilePictureUrl,
+                            (follower) => CachedNetworkImageProvider(
+                              follower.profilePictureUrl.toString(),
                             ),
                           ),
               child:
@@ -74,8 +74,8 @@ class _TwitchFollowEventWidgetState extends State<TwitchFollowEventWidget> {
                                       width: 32,
                                       height: 32,
                                       child: Image(
-                                        image: ResilientNetworkImage(
-                                          follower.profilePictureUrl,
+                                        image: CachedNetworkImageProvider(
+                                          follower.profilePictureUrl.toString(),
                                         ),
                                         fit: BoxFit.cover,
                                       ),

lib/components/chat_history/twitch/host_event.dart

@@ -1,6 +1,6 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/twitch/event.dart';
 import 'package:styled_text/styled_text.dart';
@@ -13,7 +13,9 @@ class TwitchHostEventWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DecoratedEventWidget.avatar(
-      avatar: ResilientNetworkImage(model.from.profilePictureUrl),
+      avatar: CachedNetworkImageProvider(
+        model.from.profilePictureUrl.toString(),
+      ),
       child: StyledText(
         text: AppLocalizations.of(context)!.hostEventMessage(
           model.from.displayName ?? AppLocalizations.of(context)!.anonymous,

lib/components/chat_history/twitch/message_link_preview.dart

@@ -1,6 +1,6 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:metadata_fetch/metadata_fetch.dart';
 import 'package:flutter/material.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 
 class TwitchClipData {
   final String? imageUrl;
@@ -72,9 +72,7 @@ class _TwitchMessageLinkPreviewWidgetState
           leading:
               data.imageUrl == null
                   ? null
-                  : Image(
-                    image: ResilientNetworkImage(Uri.parse(data.imageUrl!)),
-                  ),
+                  : Image(image: CachedNetworkImageProvider(data.imageUrl!)),
           title: data.title == null ? null : Text(data.title!),
           subtitle: data.description == null ? null : Text(data.description!),
           isThreeLine: true,

lib/components/chat_history/twitch/raid_event.dart

@@ -1,8 +1,8 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cloud_functions/cloud_functions.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/adapters/actions.dart';
 import 'package:rtchat/models/channels.dart';
@@ -20,7 +20,9 @@ class TwitchRaidEventWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DecoratedEventWidget.avatar(
-      avatar: ResilientNetworkImage(model.from.profilePictureUrl),
+      avatar: CachedNetworkImageProvider(
+        model.from.profilePictureUrl.toString(),
+      ),
       child: Row(
         children: [
           Expanded(

lib/components/chat_history/twitch/raiding_event.dart

@@ -1,7 +1,7 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/twitch/raiding_event.dart';
 import 'package:rtchat/models/views.dart';
@@ -35,8 +35,8 @@ class TwitchRaidingEventWidget extends StatelessWidget {
               ),
               DecoratedEventWidget.avatar(
                 decoration: const BoxDecoration(color: Colors.transparent),
-                avatar: ResilientNetworkImage(
-                  model.targetUser.profilePictureUrl,
+                avatar: CachedNetworkImageProvider(
+                  model.targetUser.profilePictureUrl.toString(),
                 ),
                 child: Row(
                   children: [
@@ -83,7 +83,9 @@ class TwitchRaidingEventWidget extends StatelessWidget {
     } else if (model.isSuccessful) {
       return GestureDetector(
         child: DecoratedEventWidget.avatar(
-          avatar: ResilientNetworkImage(model.targetUser.profilePictureUrl),
+          avatar: CachedNetworkImageProvider(
+            model.targetUser.profilePictureUrl.toString(),
+          ),
           child: Row(
             children: [
               Expanded(
@@ -119,7 +121,9 @@ class TwitchRaidingEventWidget extends StatelessWidget {
       );
     } else {
       return DecoratedEventWidget.avatar(
-        avatar: ResilientNetworkImage(model.targetUser.profilePictureUrl),
+        avatar: CachedNetworkImageProvider(
+          model.targetUser.profilePictureUrl.toString(),
+        ),
         child: StyledText(
           text: AppLocalizations.of(context)!.raidingEventCanceled(
             model.targetUser.displayName ??

lib/components/chat_history/twitch/subscription_event.dart

@@ -1,7 +1,7 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:rtchat/components/chat_history/decorated_event.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
 import 'package:rtchat/l10n/app_localizations.dart';
 import 'package:rtchat/models/messages/tokens.dart';
 import 'package:rtchat/models/messages/twitch/subscription_event.dart';
@@ -120,7 +120,7 @@ class TwitchSubscriptionMessageEventWidget extends StatelessWidget {
           preferBelow: false,
           child: Image(
             height: styleModel.fontSize,
-            image: ResilientNetworkImage(token.url),
+            image: CachedNetworkImageProvider(token.url.toString()),
             errorBuilder: (context, error, stackTrace) => Text(token.code),
           ),
         ),

lib/components/drawer/sidebar.dart

@@ -82,10 +82,7 @@ class _DrawerHeader extends StatelessWidget {
                               ClipRRect(
                                 borderRadius: BorderRadius.circular(24),
                                 child: CrossFadeImage(
-                                  placeholder:
-                                      userChannel
-                                          .profilePicture
-                                          .placeholderImage,
+                                  placeholder: MemoryImage(kTransparentImage),
                                   image: userChannel.profilePicture,
                                   height: 36,
                                   width: 36,

lib/components/emote_picker.dart

@@ -105,7 +105,7 @@ class EmotesList extends StatelessWidget {
                             onPressed: () => onEmoteSelected(emote),
                             splashRadius: 24,
                             icon: CrossFadeImage(
-                              placeholder: emote.image.placeholderImage,
+                              placeholder: MemoryImage(kTransparentImage),
                               image: emote.image,
                               width: 36,
                               height: 36,

lib/components/image/cross_fade_image.dart

@@ -1,5 +1,73 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
-import 'package:rtchat/components/image/resilient_network_image.dart';
+
+// https://github.com/brianegan/transparent_image/blob/master/lib/transparent_image.dart
+final kTransparentImage = Uint8List.fromList(<int>[
+  0x89,
+  0x50,
+  0x4E,
+  0x47,
+  0x0D,
+  0x0A,
+  0x1A,
+  0x0A,
+  0x00,
+  0x00,
+  0x00,
+  0x0D,
+  0x49,
+  0x48,
+  0x44,
+  0x52,
+  0x00,
+  0x00,
+  0x00,
+  0x01,
+  0x00,
+  0x00,
+  0x00,
+  0x01,
+  0x08,
+  0x06,
+  0x00,
+  0x00,
+  0x00,
+  0x1F,
+  0x15,
+  0xC4,
+  0x89,
+  0x00,
+  0x00,
+  0x00,
+  0x0A,
+  0x49,
+  0x44,
+  0x41,
+  0x54,
+  0x78,
+  0x9C,
+  0x63,
+  0x00,
+  0x01,
+  0x00,
+  0x00,
+  0x05,
+  0x00,
+  0x01,
+  0x0D,
+  0x0A,
+  0x2D,
+  0xB4,
+  0x00,
+  0x00,
+  0x00,
+  0x00,
+  0x49,
+  0x45,
+  0x4E,
+  0x44,
+  0xAE,
+]);
 
 class CrossFadeImage extends StatelessWidget {
   const CrossFadeImage({