D1APP-71 web image caching method applied
This commit is contained in:
parent
6e1b5179a9
commit
63f9c3e658
|
|
@ -1,15 +1,12 @@
|
||||||
import 'dart:typed_data';
|
|
||||||
|
|
||||||
import 'package:didvan/widgets/shimmer_placeholder.dart';
|
import 'package:didvan/widgets/shimmer_placeholder.dart';
|
||||||
import 'package:http/http.dart' as http;
|
|
||||||
import 'package:cached_network_image/cached_network_image.dart';
|
import 'package:cached_network_image/cached_network_image.dart';
|
||||||
import 'package:didvan/config/design_config.dart';
|
import 'package:didvan/config/design_config.dart';
|
||||||
import 'package:didvan/services/network/request.dart';
|
import 'package:didvan/services/network/request.dart';
|
||||||
import 'package:didvan/services/network/request_helper.dart';
|
import 'package:didvan/services/network/request_helper.dart';
|
||||||
import 'package:flutter/foundation.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:cached_network_image_platform_interface/cached_network_image_platform_interface.dart';
|
||||||
|
|
||||||
class SkeletonImage extends StatefulWidget {
|
class SkeletonImage extends StatelessWidget {
|
||||||
final String imageUrl;
|
final String imageUrl;
|
||||||
final double width;
|
final double width;
|
||||||
final double height;
|
final double height;
|
||||||
|
|
@ -24,66 +21,18 @@ class SkeletonImage extends StatefulWidget {
|
||||||
this.aspectRatio,
|
this.aspectRatio,
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
@override
|
|
||||||
State<SkeletonImage> createState() => _SkeletonImageState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _SkeletonImageState extends State<SkeletonImage> {
|
|
||||||
// late Uint8List _bytes;
|
|
||||||
// bool _isLoading = true;
|
|
||||||
// @override
|
|
||||||
// void initState() {
|
|
||||||
// if (kIsWeb) _getImage();
|
|
||||||
// super.initState();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Future<void> _getImage() async {
|
|
||||||
// final url = RequestHelper.baseUrl + widget.imageUrl;
|
|
||||||
// _bytes = (await http.get(
|
|
||||||
// Uri.parse(url),
|
|
||||||
// headers: {'Authorization': 'Bearer ${RequestService.token}'},
|
|
||||||
// ))
|
|
||||||
// .bodyBytes;
|
|
||||||
// if (mounted) {
|
|
||||||
// setState(() {
|
|
||||||
// _isLoading = false;
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
// if (kIsWeb) {
|
|
||||||
// if (_isLoading) {
|
|
||||||
// return _aspectRatioGenerator(
|
|
||||||
// child: ShimmerPlaceholder(
|
|
||||||
// borderRadius: widget.borderRadius,
|
|
||||||
// width: widget.aspectRatio == null ? widget.width : null,
|
|
||||||
// height: widget.aspectRatio == null ? widget.height : null,
|
|
||||||
// ),
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// return _aspectRatioGenerator(
|
|
||||||
// child: ClipRRect(
|
|
||||||
// borderRadius: widget.borderRadius,
|
|
||||||
// child: Image.memory(
|
|
||||||
// _bytes,
|
|
||||||
// fit: BoxFit.cover,
|
|
||||||
// width: widget.width,
|
|
||||||
// height: widget.height,
|
|
||||||
// ),
|
|
||||||
// ),
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
return _aspectRatioGenerator(
|
return _aspectRatioGenerator(
|
||||||
child: CachedNetworkImage(
|
child: CachedNetworkImage(
|
||||||
|
imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
|
||||||
httpHeaders: {'Authorization': 'Bearer ${RequestService.token}'},
|
httpHeaders: {'Authorization': 'Bearer ${RequestService.token}'},
|
||||||
width: widget.width,
|
width: width,
|
||||||
height: widget.height,
|
height: height,
|
||||||
imageUrl: RequestHelper.baseUrl + widget.imageUrl,
|
imageUrl: RequestHelper.baseUrl + imageUrl,
|
||||||
imageBuilder: (context, imageProvider) => Container(
|
imageBuilder: (context, imageProvider) => Container(
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
borderRadius: widget.borderRadius ?? DesignConfig.lowBorderRadius,
|
borderRadius: borderRadius ?? DesignConfig.lowBorderRadius,
|
||||||
image: DecorationImage(
|
image: DecorationImage(
|
||||||
image: imageProvider,
|
image: imageProvider,
|
||||||
fit: BoxFit.cover,
|
fit: BoxFit.cover,
|
||||||
|
|
@ -92,17 +41,17 @@ class _SkeletonImageState extends State<SkeletonImage> {
|
||||||
),
|
),
|
||||||
progressIndicatorBuilder: (context, url, progress) =>
|
progressIndicatorBuilder: (context, url, progress) =>
|
||||||
ShimmerPlaceholder(
|
ShimmerPlaceholder(
|
||||||
borderRadius: widget.borderRadius,
|
borderRadius: borderRadius,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _aspectRatioGenerator({required Widget child}) =>
|
Widget _aspectRatioGenerator({required Widget child}) => aspectRatio == null
|
||||||
widget.aspectRatio == null
|
? SizedBox(key: ValueKey(imageUrl), child: child)
|
||||||
? SizedBox(child: child)
|
|
||||||
: AspectRatio(
|
: AspectRatio(
|
||||||
aspectRatio: widget.aspectRatio!,
|
key: ValueKey(imageUrl),
|
||||||
|
aspectRatio: aspectRatio!,
|
||||||
child: child,
|
child: child,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue