Yea I had the same issue yesterday
I was using cached network image package for images…and even if it wasn’t that if u have images being loaded it looks sooo weird…I tried everything to make it work gpt got some solutions which I’m not happy about but it restores it to normal…so how I fixed it is hold on lemme
so i created a new file called cross_origin.dart in it
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:web/web.dart' as web;
class CrossOriginNetworkImage extends ImageProvider<CrossOriginNetworkImage> {
final String url;
CrossOriginNetworkImage(this.url);
@override
Future<CrossOriginNetworkImage> obtainKey(ImageConfiguration configuration) {
return SynchronousFuture(this);
}
@override
ImageStreamCompleter loadImage(
CrossOriginNetworkImage key, ImageDecoderCallback decode) {
final completer = Completer<ImageInfo>();
final imageElement = web.HTMLImageElement()
..src = url
..crossOrigin = 'anonymous';
imageElement.onLoad.listen((_) async {
final canvas = web.HTMLCanvasElement();
canvas.width = imageElement.width;
canvas.height = imageElement.height;
final ctx = canvas.context2D;
ctx.drawImage(imageElement, 0, 0);
// Convert canvas to a data URL and extract bytes.
final dataUrl = canvas.toDataUrl('image/png');
final bytes = UriData.parse(dataUrl).contentAsBytes();
// Decode image bytes into a Flutter ui.Image.
final codec = await ui.instantiateImageCodec(Uint8List.fromList(bytes));
final frame = await codec.getNextFrame();
completer.complete(ImageInfo(image: frame.image, scale: 1.0));
});
imageElement.onError.listen((_) {
completer.completeError(Exception("Failed to load image: $url"));
});
return OneFrameImageStreamCompleter(completer.future);
}
}
and then I replaced all my images that were CachedImageNetworks to include
CachedNetworkImage(
imageUrl: _images[index].imageUrl!,
fit: BoxFit.cover,
imageBuilder: (context, imageProvider) {
return Image(
image: CrossOriginNetworkImage(
_images[index].imageUrl!),
fit: BoxFit.cover,
);
},
placeholder: (context, url) => Center(
child: SpinKitPulse(
color: Colors.amber[100],
size: 50.0,
),
),
errorWidget: (context, url, error) =>
const Icon(Icons.error),
)
the change is on the image builder which u didn’t need
I don’t even know how this fixed it…im just working on another fix the issue seems to be CORS problem…but i did everything and still nothing happened so i had to do it this way… Please let me know if u have come up with a better solution…I don’t want to use this I want my code to be perfect and not patched.
the issue was so weird that I was able to see my other UI with in where the image was supposed to be
so hope this helps
and not only for images of CachedNetworkImage I guess this works for the normal non cached ones as well
