ListView glitch Flutter - flutter

Question

In total I have three files: Home.dart, Post.dart and PostBuilder.dart
In Home.dart I have a listView.seperated:
List post = [];
void initState() {
super.initState();
getPost();
}
Future getPost()async
{
//function that gets and paginates the data from the backend and adds it to the list.
}
body: ListView.separated(
controller: _scrollController,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: post.length,
itemBuilder: (context, index) {
return SizedBox(
width: double.infinity,
child: PostBuilder(post[index]);
},
separatorBuilder: (context, index) {
return const Divider();
}),
And this code on my PostBuilder.dart file:
class PostBuilder extends StatefulWidget {
final post;
const PostBuilder(this.post, {super.key});
#override
State<PostBuilder> createState() => _PostBuilderState();
}
class _PostBuilderState extends State<PostBuilder> {
return Container(child: CachedNetworkImage(
imageUrl: widget.post['postUrl'],
fit: BoxFit.contain,
),
),
Now the issue I'm facing is that whenever I navigate back from Post.dart screen to the home screen, since the height of the cached network image is dynamic, it rebuilds and it seems like a glitch.
Is there any way to stop this behaviour? Maybe something like saving the state of the screen when navigating, which might prevent reloading/rebuilding the list and hence everything stays as it was.
Also I did try the following things:
Adding listview.separated with cacheExtent.
Adding listview.separated in a parent SingleChildListView widget.
Adding 'AutomaticKeepAliveClientMixin' to the class
Unfortunately, none of this worked.

Answer 1

After a couple of days of experimentation, I ended up creating my own "image cacher" (similar to my video cacher) that got me the height and width of the image and used that to set the container size of the list which solve the "glitchiness" when the Image would reload after navigating back.
Here is how I did it if anyone is still looking for the answer:
I used a package called image_pixels
When I got the image information I convert it into flutter logical pixels by simply using this formula:
For getting height: MediaQuery.of(context).width/ (image.width/image.height)
For getting width: MediaQuery.of(context).height/(image.width/image.height)
What it does is first it gets the aspect ratio of the image and then that ratio is used to determine the height of the container to preserve the intrinsic aspect ratio of the image.
Since child size is determined by the Parent if you have a dynamic image you will have to get its size and use it to determine the parent. Or else you will have this glitchy list behaviour as it only builds visible widgets and if it is dynamic, then as it rebuilds the child from scratch it will resize the list.
Hope this helps to anyone looking for an answer.