🧑‍💻 All in one auto cache image widget

This commit is contained in:
LittleSheep 2024-09-10 21:53:05 +08:00
parent c5a975b5ed
commit 8d9a8b5435
10 changed files with 189 additions and 231 deletions

View File

@ -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
? CachedNetworkImage(
imageUrl: imageUrl,
width: 28,
height: 28,
)
: Image.network(
imageUrl,
width: 28,
height: 28,
),
leading: AutoCacheImage(
imageUrl,
width: 28,
height: 28,
noErrorWidget: true,
),
);
}

View File

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

View File

@ -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
? (PlatformInfo.canCacheImage
? CachedNetworkImageProvider(url)
: NetworkImage(url)) as ImageProvider<Object>?
: null,
backgroundImage: !isEmpty ? AutoCacheImage.provider(url) : 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 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,
),
);
},
);
}
return AutoCacheImage(url, fit: fit, noErrorWidget: true);
}
}

View File

@ -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(

View File

@ -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)
CachedNetworkImage(
fit: fit,
imageUrl: ServiceFinder.buildUrl(
'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()),
],
),
);
},
AutoCacheImage(
ServiceFinder.buildUrl(
'files',
'/attachments/${item.rid}',
),
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(
aspectRatio: ratio,
child: CenteredContainer(
maxWidth: 280,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.not_started,
color: Colors.white,
size: 32,
),
const Gap(8),
Text(
'attachmentUnload'.tr,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16,
child: Column(
children: [
if (widget.item.metadata?['thumbnail'] != null)
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
ServiceFinder.buildUrl(
'uc',
'/attachments/${widget.item.metadata?['thumbnail']}',
),
),
Text(
'attachmentUnloadCaption'.tr,
style: const TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
],
),
),
),
],
),
onTap: () {
_startLoad();

View File

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

View File

@ -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
? CachedNetworkImageProvider(userinfo.avatar)
as ImageProvider
: NetworkImage(userinfo.avatar) as ImageProvider;
return AutoCacheImage.provider(userinfo.avatar);
}).toList(),
),
);

View File

@ -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
? CachedNetworkImage(
imageUrl: x.imageUrl,
width: 28,
height: 28,
)
: Image.network(
x.imageUrl,
width: 28,
height: 28,
),
leading: AutoCacheImage(
x.imageUrl,
width: 28,
height: 28,
),
display: x.name,
content: x.textWarpedPlaceholder,
),

View File

@ -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
? CachedNetworkImage(
imageUrl: url,
width: width,
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),
),
);
},
);
return AutoCacheImage(
url,
width: width,
height: height,
);
}
@override

View File

@ -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
? CachedNetworkImage(
imageUrl: url,
width: width,
height: height,
fit: fit,
)
: Image.network(
url,
width: width,
height: height,
fit: fit,
),
child: AutoCacheImage(
url,
width: width,
height: height,
fit: fit,
),
),
).paddingSymmetric(vertical: 4);
case 'attachments':
@ -138,19 +130,12 @@ class MarkdownTextContent extends StatelessWidget {
}
}
return PlatformInfo.canCacheImage
? CachedNetworkImage(
imageUrl: url,
width: width,
height: height,
fit: fit,
)
: Image.network(
url,
width: width,
height: height,
fit: fit,
);
return AutoCacheImage(
url,
width: width,
height: height,
fit: fit,
);
},
);
}