CachedNetworkImage makes button not respond to clicks when setting fadeOutDuration to zero

DanielEidlin commented 1 year ago

🐛 Bug Report

I'm using CachedNetworkImage with the imageBuilder property, like showed in the example. Down the widget tree I had a button and I noticed it's onPressed method was never called and it appeared to be stuck. After some trial and error I've discovered that it is caused by using CachedNetworkImage with the fadeOutDuration set to Duration.zero. It is worth noting that even if I wait, the button never becomes active.

Expected behavior

The button should still be clickable.

Reproduction steps

Create a CachedNetworkImage with an imageBuilder and fadeOutDuration set to Duration.zero.
Add a button inside the image builder.

I'm adding a code sample:

CachedNetworkImage(
      imageUrl: "https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png",
      fadeOutDuration: Duration.zero,
      placeholder: (context, url) => const CircularProgressIndicator(),
      imageBuilder: (context, imageProvider) => TextButton(
        onPressed: () => print("clicked"),
        child: const Icon(
          Icons.edit,
          color: Colors.white,
        ),
      ),
    );

Configuration

Flutter: 3.3.10 Happens on android emulator, did not test on a real device.

Version: 3.2.1

Platform:

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

DanielEidlin commented 12 months ago

Hey, did you have a chance to look at it?

shin-ichiro-matsui commented 5 months ago

The same thing happened to me with InkWell etc. The issue occurs on both iOS and Android OS.

As additional information, when using a widget that can draw colors such as Container in placeholder, if Duration.zero is set for fadeOutDuration, the drawing range will not be pressable.

Sample code is provided below.

sample code

```dart Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('sample')), body: Center( child: CachedNetworkImage( // If you set it for even 1 millisecond, the problem will be improved. fadeOutDuration: Duration.zero, imageUrl: 'https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png', placeholder: (_, __) => Container( // For example, if you set a size, presses of that size from the center will not respond. // height: 80, width: double.infinity, color: Colors.transparent, child: const Center( child: CircularProgressIndicator(), ), ), errorWidget: (_, __, ___) => Container( color: const Color(0xFFf7f5f2), ), imageBuilder: (_, imageProvider) => Stack( children: [ Image(image: imageProvider), Positioned.fill( child: Material( color: Colors.transparent, child: InkWell( onTap: () => print("clicked"), ), ), ), ], ), ), ), ); } ```

flutter doctor

``` Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.7.3, on macOS 12.6.1 21G217 darwin-arm64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2) [✓] Xcode - develop for iOS and macOS (Xcode 14.1) [✓] Chrome - develop for the web [!] Android Studio (version 2022.3) ✗ Unable to find bundled Java version. [✓] VS Code (version 1.77.1) [✓] Connected device (3 available) [✓] HTTP Host Availability ```

Baseflow / flutter_cached_network_image