flutter_cached_network_image icon indicating copy to clipboard operation
flutter_cached_network_image copied to clipboard

Image widget loadingBuilder doesn't show immediately when using CachedNetworkImageProvider

Open WingCH opened this issue 3 years ago • 3 comments

🐛 Bug Report

Image widget loadingBuilder doesn't show immediately when using CachedNetworkImageProvider

Expected behavior

loadingBuilder shows placeholder immediately, just like CachedNetworkImage placeholder

Expected (CachedNetworkImage)

https://user-images.githubusercontent.com/19588517/179251005-f23e5f4e-eaaa-4b98-935c-93480bcdd9e2.mp4

Now (Image + CachedNetworkImageProvider)

https://user-images.githubusercontent.com/19588517/179251039-d6bc7199-d349-4f9f-bd68-7f544aa6da52.mp4

Reproduction steps

  1. go to example project
  2. use Image instead of CachedNetworkImage in GridContent

Original (CachedNetworkImage)

return GridView.builder(
  itemCount: 250,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemBuilder: (BuildContext context, int index) => CachedNetworkImage(
    imageUrl: 'https://loremflickr.com/100/100/music?lock=$index',
    placeholder: (BuildContext context, String url) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  ),
);

After (Image)

return GridView.builder(
  itemCount: 250,
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemBuilder: (BuildContext context, int index) {
    return Image(
      image: CachedNetworkImageProvider(
        'https://loremflickr.com/320/240/music?lock=$index',
      ),
      loadingBuilder: (context, child, progress) => progress == null
          ? child
          : const Center(
              child: CircularProgressIndicator(),
            ),
    );
  },
);

Configuration

Version: 3.2.1

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale zh-Hant-HK)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.1)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!

Platform:

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

WingCH avatar Jul 15 '22 15:07 WingCH

I also encountered this problem

Miracle-xiong avatar Jul 29 '22 13:07 Miracle-xiong