Image loads in center then moves to start of container

[jeprojects]

🐛 Bug Report

The image fades in the centre of the column and then aligns to the left.

Code

CachedNetworkImage(
        imageUrl: url,
        alignment: Alignment.centerLeft,
        fit: BoxFit.cover,
      )

Expected behavior

Replacing this code with FadeInImage works correctly and fades-in aligned correctly.

Configuration

Version: 3.2.0 Flutter Version: 3

Platform:

• [ ] :iphone: iOS
• [x] :robot: Android

[sarakisar97]

I faced this bug, also. Any update?

[elenaconache]

@jeprojects @sarakisar97 I faced the same issue and got it fixed by setting the width to double.infinity for the CachedNetworkImage widget.

CachedNetworkImage(
        imageUrl: 'url',
        height: 32,
        width: double.infinity,
        fit: BoxFit.contain,
        alignment: Alignment.centerLeft,
      )

I hope this helps, not sure if I had a different issue because I see this was for Android but I replicated it with the iOS Simulator.

[SaraAkwad]

I have fixed it by wrapping CachedNetworkImage with Row.

[timbell]

I came across this issue today but have since worked around it by using useOldImageOnUrlChange: true which I want for my use-case anyway.

I think the bug could be fixed by respecting the configured alignment value in the Stack widget used by the octo-image ImageHandler for fading. That is, here do alignment: alignment, instead of alignment: Alignment.center,. I tried it locally and it seemed to do the trick.

[seokhyeonSong]

any update?