Герой с CachedNetworkImageAndroid

Форум для тех, кто программирует под Android
Ответить
Anonymous
 Герой с CachedNetworkImage

Сообщение Anonymous »

У меня есть список ораторов. Когда я нажимаю на любой из элементов, я перехожу на страницу с подробной информацией об этом докладчике. При переходе маленький аватар трансформируется в большой с помощью виджета «Герой». Эти аватары — CachedNetworkImages. В обычном состоянии (когда образ успешно загружается из сети) все работает нормально. Однако если смоделировать ситуацию, когда изображение не загружается или возникает другая ошибка, errorWidget CachedNetworkImages начинает мерцать во время перехода.
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,
);
}
Это мой код виджета для CachedNetworkImages, который я затем обертываю в виджет Hero.

Подробнее здесь: https://stackoverflow.com/questions/787 ... tworkimage
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Android»