refactor: Simplify MxcImage and replace CachedNetworkImage
This commit is contained in:
Christian Pauly
parent
8d0ca2d769
commit
20c37cb51a
14 changed files with 255 additions and 538 deletions
|
|
@ -1,10 +1,9 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/utils/string_color.dart';
|
||||
import 'matrix.dart';
|
||||
import 'package:fluffychat/widgets/mxc_image.dart';
|
||||
|
||||
class Avatar extends StatelessWidget {
|
||||
final Uri? mxContent;
|
||||
|
|
@ -27,11 +26,6 @@ class Avatar extends StatelessWidget {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final src = mxContent?.getThumbnail(
|
||||
client ?? Matrix.of(context).client,
|
||||
width: size * MediaQuery.of(context).devicePixelRatio,
|
||||
height: size * MediaQuery.of(context).devicePixelRatio,
|
||||
);
|
||||
var fallbackLetters = '@';
|
||||
final name = this.name;
|
||||
if (name != null) {
|
||||
|
|
@ -68,17 +62,12 @@ class Avatar extends StatelessWidget {
|
|||
noPic ? name?.lightColor : Theme.of(context).secondaryHeaderColor,
|
||||
child: noPic
|
||||
? textWidget
|
||||
: CachedNetworkImage(
|
||||
imageUrl: src.toString(),
|
||||
: MxcImage(
|
||||
uri: mxContent,
|
||||
fit: BoxFit.cover,
|
||||
width: size,
|
||||
height: size,
|
||||
placeholder: (c, s) => textWidget,
|
||||
errorWidget: (c, s, d) => Stack(
|
||||
children: [
|
||||
textWidget,
|
||||
],
|
||||
),
|
||||
placeholder: (_) => textWidget,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'matrix.dart';
|
||||
import 'package:fluffychat/widgets/mxc_image.dart';
|
||||
|
||||
class ContentBanner extends StatelessWidget {
|
||||
final Uri? mxContent;
|
||||
final double height;
|
||||
final IconData defaultIcon;
|
||||
final bool loading;
|
||||
final void Function()? onEdit;
|
||||
final Client? client;
|
||||
final double opacity;
|
||||
|
|
@ -21,7 +17,6 @@ class ContentBanner extends StatelessWidget {
|
|||
{this.mxContent,
|
||||
this.height = 400,
|
||||
this.defaultIcon = Icons.account_circle_outlined,
|
||||
this.loading = false,
|
||||
this.onEdit,
|
||||
this.client,
|
||||
this.opacity = 0.75,
|
||||
|
|
@ -47,44 +42,27 @@ class ContentBanner extends StatelessWidget {
|
|||
bottom: 0,
|
||||
child: Opacity(
|
||||
opacity: opacity,
|
||||
child: (!loading)
|
||||
? LayoutBuilder(builder:
|
||||
(BuildContext context, BoxConstraints constraints) {
|
||||
// #775 don't request new image resolution on every resize
|
||||
// by rounding up to the next multiple of stepSize
|
||||
const stepSize = 300;
|
||||
final bannerSize =
|
||||
constraints.maxWidth * window.devicePixelRatio;
|
||||
final steppedBannerSize =
|
||||
(bannerSize / stepSize).ceil() * stepSize;
|
||||
final src = mxContent?.getThumbnail(
|
||||
client ?? Matrix.of(context).client,
|
||||
width: steppedBannerSize,
|
||||
height: steppedBannerSize,
|
||||
method: ThumbnailMethod.scale,
|
||||
animated: true,
|
||||
);
|
||||
return Hero(
|
||||
tag: heroTag,
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: src.toString(),
|
||||
height: 300,
|
||||
fit: BoxFit.cover,
|
||||
errorWidget: (c, m, e) => Icon(
|
||||
defaultIcon,
|
||||
size: 200,
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
);
|
||||
})
|
||||
: Icon(
|
||||
defaultIcon,
|
||||
size: 200,
|
||||
color: Theme.of(context).colorScheme.onSecondaryContainer,
|
||||
child: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
return Hero(
|
||||
tag: heroTag,
|
||||
child: MxcImage(
|
||||
uri: mxContent,
|
||||
animated: true,
|
||||
fit: BoxFit.cover,
|
||||
height: 400,
|
||||
width: 800,
|
||||
placeholder: (c) => Center(
|
||||
child: Icon(
|
||||
defaultIcon,
|
||||
size: 200,
|
||||
color:
|
||||
Theme.of(context).colorScheme.onSecondaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
if (onEdit != null)
|
||||
|
|
|
|||
147
lib/widgets/mxc_image.dart
Normal file
147
lib/widgets/mxc_image.dart
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import 'dart:typed_data';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:http/http.dart' as http;
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_file_extension.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
|
||||
class MxcImage extends StatefulWidget {
|
||||
final Uri? uri;
|
||||
final Event? event;
|
||||
final double? width;
|
||||
final double? height;
|
||||
final BoxFit? fit;
|
||||
final bool isThumbnail;
|
||||
final bool animated;
|
||||
final Duration retryDuration;
|
||||
final Duration animationDuration;
|
||||
final Curve animationCurve;
|
||||
final ThumbnailMethod thumbnailMethod;
|
||||
final Widget Function(BuildContext context)? placeholder;
|
||||
|
||||
const MxcImage({
|
||||
this.uri,
|
||||
this.event,
|
||||
this.width,
|
||||
this.height,
|
||||
this.fit,
|
||||
this.placeholder,
|
||||
this.isThumbnail = true,
|
||||
this.animated = false,
|
||||
this.animationDuration = const Duration(milliseconds: 200),
|
||||
this.retryDuration = const Duration(seconds: 2),
|
||||
this.animationCurve = Curves.linear,
|
||||
this.thumbnailMethod = ThumbnailMethod.scale,
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<MxcImage> createState() => _MxcImageState();
|
||||
}
|
||||
|
||||
class _MxcImageState extends State<MxcImage> {
|
||||
Uint8List? _imageData;
|
||||
bool? _isCached;
|
||||
|
||||
Future<void> _load() async {
|
||||
final client = Matrix.of(context).client;
|
||||
final uri = widget.uri;
|
||||
final event = widget.event;
|
||||
|
||||
if (uri != null) {
|
||||
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
|
||||
final width = widget.width;
|
||||
final realWidth = width == null ? null : width * devicePixelRatio;
|
||||
final height = widget.height;
|
||||
final realHeight = height == null ? null : height * devicePixelRatio;
|
||||
|
||||
final httpUri = widget.isThumbnail
|
||||
? uri.getThumbnail(
|
||||
client,
|
||||
width: realWidth,
|
||||
height: realHeight,
|
||||
animated: widget.animated,
|
||||
method: widget.thumbnailMethod,
|
||||
)
|
||||
: uri.getDownloadLink(client);
|
||||
|
||||
final storeKey = widget.isThumbnail ? httpUri : uri;
|
||||
|
||||
if (_isCached == null) {
|
||||
final cachedData = await client.database?.getFile(storeKey);
|
||||
if (cachedData != null) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_imageData = cachedData;
|
||||
_isCached = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
_isCached = false;
|
||||
}
|
||||
|
||||
final remoteData = await http.get(httpUri).then((r) => r.bodyBytes);
|
||||
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_imageData = remoteData;
|
||||
});
|
||||
await client.database?.storeFile(storeKey, remoteData, 0);
|
||||
}
|
||||
|
||||
if (event != null) {
|
||||
final data = await event.downloadAndDecryptAttachment(
|
||||
getThumbnail: widget.isThumbnail,
|
||||
);
|
||||
if (data.detectFileType is MatrixImageFile) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_imageData = data.bytes;
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void _tryLoad(_) async {
|
||||
try {
|
||||
await _load();
|
||||
} catch (_) {
|
||||
if (!mounted) return;
|
||||
await Future.delayed(widget.retryDuration);
|
||||
_tryLoad(_);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback(_tryLoad);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final data = _imageData;
|
||||
|
||||
return AnimatedCrossFade(
|
||||
duration: widget.animationDuration,
|
||||
crossFadeState:
|
||||
data == null ? CrossFadeState.showFirst : CrossFadeState.showSecond,
|
||||
firstChild: widget.placeholder?.call(context) ??
|
||||
const Center(
|
||||
child: CircularProgressIndicator.adaptive(),
|
||||
),
|
||||
secondChild: data == null
|
||||
? Container()
|
||||
: Image.memory(
|
||||
data,
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
fit: widget.fit,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue