GIF того, как это выглядит сейчас: https://imgur.com/a/E7ogQhV
(Извините, по неизвестной причине я не могу загрузить это через сайт.)
Я попробовал получить изображение самостоятельно и, в зависимости от кода ответа, выбрал отображение либо виджета-заполнителя, либо CachedNetworkImages. Однако возникло другое поведение: виджет-заполнитель отображался в начале, даже если изображение уже было успешно загружено.
Код: Выделить всё
class NetworkImageWidget extends StatefulWidget {
const NetworkImageWidget({
super.key,
required this.imageUrl,
this.width,
this.height,
this.fit = BoxFit.cover,
});
final String? imageUrl;
final double? width;
final double? height;
final BoxFit? fit;
@override
State createState() => _NetworkImageWidgetState();
}
class _NetworkImageWidgetState extends State {
@override
void initState() {
super.initState();
// fetchImage();
}
bool isImageReal = false;
bool get _isImageInvalid =>
(widget.imageUrl?.isEmpty ?? true) ||
(!widget.imageUrl!.startsWith('http') || !isImageReal);
// Future fetchImage() async {
//
// final response = await http.get(Uri.parse(widget.imageUrl!));
// if (response.statusCode == 200) {
// setState(() => isImageReal = true);
// } else {
// setState(() => isImageReal = false);
// }
// }
@override
Widget build(BuildContext context) {
// if (_isImageInvalid) {
// return _PlaceHolderImageWidget(
// width: widget.width,
// height: widget.height,
// fit: widget.fit,
// );
// }
return CachedNetworkImage(
imageUrl: widget.imageUrl!,
width: widget.width,
height: widget.height,
fit: widget.fit,
// cacheManager: CacheManager,
placeholder: (_, __) => _CircleImageShimmer(
width: widget.width,
height: widget.height,
),
errorWidget: (_, __, ___) => _PlaceHolderImageWidget(
width: widget.width,
height: widget.height,
fit: widget.fit,
),
);
}
}
class _CircleImageShimmer extends StatelessWidget {
const _CircleImageShimmer({
required this.width,
required this.height,
});
final double? width;
final double? height;
@override
Widget build(BuildContext context) {
final appColor = AppColorScheme.of(context);
return Shimmer.fromColors(
baseColor: appColor.shimmer,
highlightColor: appColor.shimmerHighlight,
child: Container(
color: Colors.white,
width: width,
height: height,
),
);
}
}
class _PlaceHolderImageWidget extends StatelessWidget {
const _PlaceHolderImageWidget({this.width, this.height, this.fit});
final double? width;
final double? height;
final BoxFit? fit;
@override
Widget build(BuildContext context) => Image.asset(
Images.largePlaceholder,
width: width,
height: height,
fit: fit,
);
}
Подробнее здесь: https://stackoverflow.com/questions/787 ... tworkimage