How to optimize multiple pictures

[yvone1991]

cached_network_image: ^3.1.0

When my page has a lot of pictures Open a new page and return Some pictures will reload and flash, resulting in a poor user experience How should this be optimized

step1：HomePage

step2：open a big picture ...

step3：return HomePage（ps：The cute little boy icon is a placeholder for my head^_^）

[renefloor]

How large are your small images? (The pixels of the image, not the widget.)

[yvone1991]

How large are your small images? (The pixels of the image, not the widget.)

from camera or album…… by iphone 12 pro max I've tried to compress the quality ps： Can it be managed through CacheManager But I can't find the relevant teaching documents

[renefloor]

from camera or album…… by iphone 12 pro max

So that can be anything from 300px to probably 12 MP?

You can try resizing all images in the list in memory or on disk, but it is best to resize these images on the server.

Can it be managed through CacheManager

What do you want to manage? If you are loading a lot of really large images you will always hit memory issues.

[yvone1991]

from camera or album…… by iphone 12 pro max

So that can be anything from 300px to probably 12 MP?

You can try resizing all images in the list in memory or on disk, but it is best to resize these images on the server.

Can it be managed through CacheManager

What do you want to manage? If you are loading a lot of really large images you will always hit memory issues.

Thank you for your answer. I will modify the image configuration of the server to display thumbnails in the HomePage, but it is still inevitable to display large images when viewing large images on new pages。

`class PhotoViewPage extends StatefulWidget { RouteArguments arguments;

PhotoViewPage({required this.arguments});

@override State createState() => PhotoViewPageState(arguments); }

class PhotoViewPageState extends State { RouteArguments arguments; late List pictures; late int index; late String heroTag; late PageController _controller; PhotoViewPageState(this.arguments);

@override void initState() { super.initState(); pictures = arguments.params['images']; index = arguments.params['index']; heroTag = arguments.params['heroTag']; _controller = PageController(initialPage: index); }

@override void dispose() { _controller.dispose(); super.dispose(); }

@override Widget build(BuildContext context) { return GestureDetector( onTap: () { Navigator.of(context).pop(); }, child: Container( child: pictures.length > 1 ? PhotoViewGallery.builder( scrollPhysics: ClampingScrollPhysics(), pageController: _controller, itemCount: pictures.length, enableRotation: false, builder: (context, position) { return PhotoViewGalleryPageOptions( imageProvider: CachedNetworkImageProvider('${pictures[position]}'), minScale: PhotoViewComputedScale.contained 1, maxScale: PhotoViewComputedScale.covered 2.0, heroAttributes: index == position ? PhotoViewHeroAttributes(tag: heroTag) : null, ); }) : PhotoView( minScale: PhotoViewComputedScale.contained 1, maxScale: PhotoViewComputedScale.covered 2.0, heroAttributes: PhotoViewHeroAttributes(tag: heroTag), imageProvider: CachedNetworkImageProvider('${pictures[index]}')), ), ); } }`

I think the reason for reload: The size of the picture cache has exceeded its tolerance

ps： So I thought it could be configured CachedNetworkImage( imageConfig:Config( maxCachedSized: maxCachedImage: ), ) Ha ha It can solve the reload problem