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?

[s-tyd]

In my case, AspectRatio solved the problem

Column(
      children: [
        Expanded(
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              Stack(
                alignment: Alignment.center,
                children: [
                  AspectRatio(
                    aspectRatio: 1,
                    child: CachedNetworkImage(imageUrl: thumbnailUrl),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Icon(Icons.navigate_before),
                      Icon(Icons.navigate_next),
                    ],
                  ),
                ],
              ),
...

[finani]

In my case, I want to show image from the front of the container in stack, but the image appears in the center and moves to the front. I solved this issue by setting a fixed width and height.

CachedNetworkImage(
      imageUrl: imageUrl,
      width: singleCardWidth * 5.6 / 8.0,
      height: singleCardHeight * 5.6 / 8.0,
      fit: BoxFit.contain,
    );