flutter_cached_network_image
flutter_cached_network_image copied to clipboard
Image widget loadingBuilder doesn't show immediately when using CachedNetworkImageProvider
🐛 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
- go to
exampleproject - use
Imageinstead ofCachedNetworkImageinGridContent
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
I also encountered this problem