🧑‍💻 All in one auto cache image widget

lib/screens/account/stickers.dart

@@ -1,14 +1,13 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
 import 'package:solian/models/pagination.dart';
 import 'package:solian/models/stickers.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/stickers.dart';
 import 'package:solian/services.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:solian/widgets/stickers/sticker_uploader.dart';
 
 class StickerScreen extends StatefulWidget {
@@ -94,17 +93,12 @@ class _StickerScreenState extends State<StickerScreen> {
           ),
         ],
       ),
-      leading: PlatformInfo.canCacheImage
+      leading: AutoCacheImage(
-          ? CachedNetworkImage(
+        imageUrl,
-              imageUrl: imageUrl,
+        width: 28,
-              width: 28,
+        height: 28,
-              height: 28,
+        noErrorWidget: true,
-            )
+      ),
-          : Image.network(
-              imageUrl,
-              width: 28,
-              height: 28,
-            ),
     );
   }
 

lib/screens/posts/post_editor.dart

@@ -177,19 +177,23 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
           children: [
             ListTile(
               tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
-              title: Row(
+              title: SingleChildScrollView(
-                children: [
+                scrollDirection: Axis.horizontal,
-                  Text(
+                child: Row(
-                    _editorController.title ?? 'title'.tr,
+                  children: [
-                    maxLines: 1,
+                    Text(
-                    overflow: TextOverflow.ellipsis,
+                      _editorController.title ?? 'title'.tr,
-                  ),
+                      maxLines: 1,
-                  const Gap(6),
+                      overflow: TextOverflow.ellipsis,
-                  if (_editorController.aliasController.text.isNotEmpty)
-                    Badge(
-                      label: Text('#${_editorController.aliasController.text}'),
                     ),
-                ],
+                    const Gap(6),
+                    if (_editorController.aliasController.text.isNotEmpty)
+                      Badge(
+                        label:
+                            Text('#${_editorController.aliasController.text}'),
+                      ),
+                  ],
+                ),
               ),
               subtitle: Text(
                 _editorController.description ?? 'description'.tr,

lib/widgets/account/account_avatar.dart

@@ -1,7 +1,6 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/services.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 
 class AccountAvatar extends StatelessWidget {
   final dynamic content;
@@ -34,11 +33,7 @@ class AccountAvatar extends StatelessWidget {
       key: Key('a$content'),
       radius: radius,
       backgroundColor: bgColor,
-      backgroundImage: !isEmpty
+      backgroundImage: !isEmpty ? AutoCacheImage.provider(url) : null,
-          ? (PlatformInfo.canCacheImage
-              ? CachedNetworkImageProvider(url)
-              : NetworkImage(url)) as ImageProvider<Object>?
-          : null,
       child: isEmpty
           ? Icon(
               Icons.account_circle,
@@ -74,33 +69,6 @@ class AccountProfileImage extends StatelessWidget {
         ? content
         : ServiceFinder.buildUrl('files', '/attachments/$content');
 
-    if (PlatformInfo.canCacheImage) {
+    return AutoCacheImage(url, fit: fit, noErrorWidget: true);
-      return CachedNetworkImage(
-        imageUrl: url,
-        fit: fit,
-        progressIndicatorBuilder: (context, url, downloadProgress) => Center(
-          child: CircularProgressIndicator(
-            value: downloadProgress.progress,
-          ),
-        ),
-      );
-    } else {
-      return Image.network(
-        url,
-        fit: fit,
-        loadingBuilder: (BuildContext context, Widget child,
-            ImageChunkEvent? loadingProgress) {
-          if (loadingProgress == null) return child;
-          return Center(
-            child: CircularProgressIndicator(
-              value: loadingProgress.expectedTotalBytes != null
-                  ? loadingProgress.cumulativeBytesLoaded /
-                      loadingProgress.expectedTotalBytes!
-                  : null,
-            ),
-          );
-        },
-      );
-    }
   }
 }

lib/widgets/attachments/attachment_editor_thumbnail.dart

@@ -54,7 +54,11 @@ class _AttachmentEditorThumbnailDialogState
     final AttachmentProvider attach = Get.find();
 
     widget.item.metadata ??= {};
-    widget.item.metadata!['thumbnail'] = _attachmentController.text;
+    if (_attachmentController.text.isNotEmpty) {
+      widget.item.metadata!['thumbnail'] = _attachmentController.text;
+    } else {
+      widget.item.metadata!['thumbnail'] = null;
+    }
 
     try {
       await attach.updateAttachment(

lib/widgets/attachments/attachment_item.dart

@@ -1,17 +1,15 @@
 import 'dart:math';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:media_kit/media_kit.dart';
 import 'package:media_kit_video/media_kit_video.dart';
 import 'package:solian/models/attachment.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/durations.dart';
 import 'package:solian/services.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:solian/widgets/sized_container.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
@@ -140,66 +138,13 @@ class _AttachmentItemImage extends StatelessWidget {
       child: Stack(
         fit: StackFit.expand,
         children: [
-          if (PlatformInfo.canCacheImage)
+          AutoCacheImage(
-            CachedNetworkImage(
+            ServiceFinder.buildUrl(
-              fit: fit,
+              'files',
-              imageUrl: ServiceFinder.buildUrl(
+              '/attachments/${item.rid}',
-                'files',
-                '/attachments/${item.rid}',
-              ),
-              progressIndicatorBuilder: (context, url, downloadProgress) {
-                return Center(
-                  child: CircularProgressIndicator(
-                    value: downloadProgress.progress,
-                  ),
-                );
-              },
-              errorWidget: (context, url, error) {
-                return Material(
-                  color: Theme.of(context).colorScheme.surface,
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      const Icon(Icons.close, size: 32)
-                          .animate(onPlay: (e) => e.repeat(reverse: true))
-                          .fade(duration: 500.ms),
-                      Text(error.toString()),
-                    ],
-                  ),
-                );
-              },
-            )
-          else
-            Image.network(
-              ServiceFinder.buildUrl('files', '/attachments/${item.rid}'),
-              fit: fit,
-              loadingBuilder: (BuildContext context, Widget child,
-                  ImageChunkEvent? loadingProgress) {
-                if (loadingProgress == null) return child;
-                return Center(
-                  child: CircularProgressIndicator(
-                    value: loadingProgress.expectedTotalBytes != null
-                        ? loadingProgress.cumulativeBytesLoaded /
-                            loadingProgress.expectedTotalBytes!
-                        : null,
-                  ),
-                );
-              },
-              errorBuilder: (context, error, stackTrace) {
-                return Material(
-                  color: Theme.of(context).colorScheme.surface,
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      const Icon(Icons.close, size: 32)
-                          .animate(onPlay: (e) => e.repeat(reverse: true))
-                          .fade(duration: 500.ms),
-                      Text(error.toString()),
-                    ],
-                  ),
-                );
-              },
             ),
+            fit: fit,
+          ),
           if (showBadge && badge != null)
             Positioned(
               right: 12,
@@ -279,35 +224,19 @@ class _AttachmentItemVideoState extends State<_AttachmentItemVideo> {
     final ratio = widget.item.metadata?['ratio'] ?? 16 / 9;
     if (!_showContent) {
       return GestureDetector(
-        child: AspectRatio(
+        child: Column(
-          aspectRatio: ratio,
+          children: [
-          child: CenteredContainer(
+            if (widget.item.metadata?['thumbnail'] != null)
-            maxWidth: 280,
+              AspectRatio(
-            child: Column(
+                aspectRatio: 16 / 9,
-              mainAxisAlignment: MainAxisAlignment.center,
+                child: Image.network(
-              children: [
+                  ServiceFinder.buildUrl(
-                const Icon(
+                    'uc',
-                  Icons.not_started,
+                    '/attachments/${widget.item.metadata?['thumbnail']}',
-                  color: Colors.white,
-                  size: 32,
-                ),
-                const Gap(8),
-                Text(
-                  'attachmentUnload'.tr,
-                  style: const TextStyle(
-                    color: Colors.white,
-                    fontWeight: FontWeight.bold,
-                    fontSize: 16,
                   ),
                 ),
-                Text(
+              ),
-                  'attachmentUnloadCaption'.tr,
+          ],
-                  style: const TextStyle(color: Colors.white),
-                  textAlign: TextAlign.center,
-                ),
-              ],
-            ),
-          ),
         ),
         onTap: () {
           _startLoad();

lib/widgets/auto_cache_image.dart

@@ -0,0 +1,113 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:solian/platform.dart';
+import 'package:solian/widgets/sized_container.dart';
+
+class AutoCacheImage extends StatelessWidget {
+  final String url;
+  final double? width, height;
+  final BoxFit? fit;
+  final bool noProgressIndicator;
+  final bool noErrorWidget;
+
+  const AutoCacheImage(
+    this.url, {
+    super.key,
+    this.width,
+    this.height,
+    this.fit,
+    this.noProgressIndicator = false,
+    this.noErrorWidget = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (PlatformInfo.canCacheImage) {
+      return CachedNetworkImage(
+        imageUrl: url,
+        width: width,
+        height: height,
+        fit: fit,
+        progressIndicatorBuilder: noProgressIndicator
+            ? null
+            : (context, url, downloadProgress) => Center(
+                  child: CircularProgressIndicator(
+                    value: downloadProgress.progress,
+                  ),
+                ),
+        errorWidget: noErrorWidget
+            ? null
+            : (context, url, error) {
+                return Material(
+                  color: Theme.of(context).colorScheme.surface,
+                  child: CenteredContainer(
+                    maxWidth: 280,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const Icon(Icons.close, size: 32)
+                            .animate(onPlay: (e) => e.repeat(reverse: true))
+                            .fade(duration: 500.ms),
+                        Text(
+                          error.toString(),
+                          textAlign: TextAlign.center,
+                        ),
+                      ],
+                    ),
+                  ),
+                );
+              },
+      );
+    }
+    return Image.network(
+      url,
+      width: width,
+      height: height,
+      fit: fit,
+      loadingBuilder: noProgressIndicator
+          ? null
+          : (BuildContext context, Widget child,
+              ImageChunkEvent? loadingProgress) {
+              if (loadingProgress == null) return child;
+              return Center(
+                child: CircularProgressIndicator(
+                  value: loadingProgress.expectedTotalBytes != null
+                      ? loadingProgress.cumulativeBytesLoaded /
+                          loadingProgress.expectedTotalBytes!
+                      : null,
+                ),
+              );
+            },
+      errorBuilder: noErrorWidget
+          ? null
+          : (context, error, stackTrace) {
+              return Material(
+                color: Theme.of(context).colorScheme.surface,
+                child: CenteredContainer(
+                  maxWidth: 280,
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      const Icon(Icons.close, size: 32)
+                          .animate(onPlay: (e) => e.repeat(reverse: true))
+                          .fade(duration: 500.ms),
+                      Text(
+                        error.toString(),
+                        textAlign: TextAlign.center,
+                      ),
+                    ],
+                  ),
+                ),
+              );
+            },
+    );
+  }
+
+  static ImageProvider provider(String url) {
+    if (PlatformInfo.canCacheImage) {
+      return CachedNetworkImageProvider(url);
+    }
+    return NetworkImage(url);
+  }
+}

lib/widgets/channel/channel_call_indicator.dart

@@ -1,16 +1,15 @@
 import 'dart:convert';
 
 import 'package:avatar_stack/avatar_stack.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:solian/models/account.dart';
 import 'package:solian/models/call.dart';
 import 'package:solian/models/channel.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/call.dart';
 import 'package:solian/theme.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:solian/widgets/chat/call/call_prejoin.dart';
 
 class ChannelCallIndicator extends StatelessWidget {
@@ -76,10 +75,7 @@ class ChannelCallIndicator extends StatelessWidget {
                   avatars: ongoingCall.participants!.map((x) {
                     final userinfo =
                         Account.fromJson(jsonDecode(x['metadata']));
-                    return PlatformInfo.canCacheImage
+                    return AutoCacheImage.provider(userinfo.avatar);
-                        ? CachedNetworkImageProvider(userinfo.avatar)
-                            as ImageProvider
-                        : NetworkImage(userinfo.avatar) as ImageProvider;
                   }).toList(),
                 ),
               );

lib/widgets/chat/chat_message_input.dart

@@ -1,7 +1,6 @@
 import 'dart:async';
 import 'dart:convert';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -11,13 +10,13 @@ import 'package:solian/models/account.dart';
 import 'package:solian/models/channel.dart';
 import 'package:solian/models/event.dart';
 import 'package:solian/models/packet.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/attachment_uploader.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/stickers.dart';
 import 'package:solian/providers/websocket.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/attachments/attachment_editor.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:solian/widgets/chat/chat_event.dart';
 import 'package:badges/badges.dart' as badges;
 import 'package:uuid/uuid.dart';
@@ -414,17 +413,11 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
                           .map(
                             (x) => ChatMessageSuggestion(
                               type: 'emotes',
-                              leading: PlatformInfo.canCacheImage
+                              leading: AutoCacheImage(
-                                  ? CachedNetworkImage(
+                                x.imageUrl,
-                                      imageUrl: x.imageUrl,
+                                width: 28,
-                                      width: 28,
+                                height: 28,
-                                      height: 28,
+                              ),
-                                    )
-                                  : Image.network(
-                                      x.imageUrl,
-                                      width: 28,
-                                      height: 28,
-                                    ),
                               display: x.name,
                               content: x.textWarpedPlaceholder,
                             ),

lib/widgets/link_expansion.dart

@@ -1,11 +1,9 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:get/get.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/link_expander.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class LinkExpansion extends StatelessWidget {
@@ -17,37 +15,11 @@ class LinkExpansion extends StatelessWidget {
     if (url.endsWith('svg')) {
       return SvgPicture.network(url, width: width, height: height);
     }
-    return PlatformInfo.canCacheImage
+    return AutoCacheImage(
-        ? CachedNetworkImage(
+      url,
-            imageUrl: url,
+      width: width,
-            width: width,
+      height: height,
-            height: height,
+    );
-            errorWidget: (context, url, error) {
-              return Material(
-                color: Theme.of(context).colorScheme.surface,
-                child: Center(
-                  child: const Icon(Icons.close, size: 32)
-                      .animate(onPlay: (e) => e.repeat(reverse: true))
-                      .fade(duration: 500.ms),
-                ),
-              );
-            },
-          )
-        : Image.network(
-            url,
-            width: width,
-            height: height,
-            errorBuilder: (context, error, stackTrace) {
-              return Material(
-                color: Theme.of(context).colorScheme.surface,
-                child: Center(
-                  child: const Icon(Icons.close, size: 32)
-                      .animate(onPlay: (e) => e.repeat(reverse: true))
-                      .fade(duration: 500.ms),
-                ),
-              );
-            },
-          );
   }
 
   @override

lib/widgets/markdown_text_content.dart

@@ -1,12 +1,11 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown_selectionarea/flutter_markdown.dart';
 import 'package:get/get.dart';
 import 'package:markdown/markdown.dart' as markdown;
 import 'package:markdown/markdown.dart';
-import 'package:solian/platform.dart';
 import 'package:solian/providers/stickers.dart';
 import 'package:solian/widgets/attachments/attachment_list.dart';
+import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 import 'account/account_profile_popup.dart';
@@ -107,19 +106,12 @@ class MarkdownTextContent extends StatelessWidget {
                 borderRadius: BorderRadius.all(Radius.circular(radius)),
                 child: Container(
                   color: Theme.of(context).colorScheme.surfaceContainer,
-                  child: PlatformInfo.canCacheImage
+                  child: AutoCacheImage(
-                      ? CachedNetworkImage(
+                    url,
-                          imageUrl: url,
+                    width: width,
-                          width: width,
+                    height: height,
-                          height: height,
+                    fit: fit,
-                          fit: fit,
+                  ),
-                        )
-                      : Image.network(
-                          url,
-                          width: width,
-                          height: height,
-                          fit: fit,
-                        ),
                 ),
               ).paddingSymmetric(vertical: 4);
             case 'attachments':
@@ -138,19 +130,12 @@ class MarkdownTextContent extends StatelessWidget {
           }
         }
 
-        return PlatformInfo.canCacheImage
+        return AutoCacheImage(
-            ? CachedNetworkImage(
+          url,
-                imageUrl: url,
+          width: width,
-                width: width,
+          height: height,
-                height: height,
+          fit: fit,
-                fit: fit,
+        );
-              )
-            : Image.network(
-                url,
-                width: width,
-                height: height,
-                fit: fit,
-              );
       },
     );
   }