Search code examples
flutterimagedartmaterial-design

Image errorBuilder not called in InkWell


I want to use the errorBuilder callback when an image asset does not exist. But it's not called when the Image is used with InkWell + Ink.

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: InkWell(
            child: Ink.image(
              image: Image.asset(
                'assets/does-not-exist.png',
                // Not called:
                errorBuilder: (context, error, stackTrace) {
                  return Text('$error');
                },
              ).image,
              fit: BoxFit.cover,
              height: 400,
            ),
            onTap: () {},
          ),
        ),
      ),
    ),
  );
}


Solution

  • I finally made this class in replacement of Ink.image:

    class _InkImage extends StatelessWidget {
      final ImageProvider image;
      final BoxFit? fit;
      final double? width;
      final double? height;
      final errorCompleter = Completer();
    
      _InkImage({
        super.key,
        required this.image,
        this.fit,
        this.width,
        this.height,
      });
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
          future: errorCompleter.future,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return SizedBox(
                width: width,
                height: height,
                child: Text('${snapshot.error}'),
              );
            }
            return Ink.image(
              image: image,
              onImageError: (exception, stackTrace) {
                errorCompleter.completeError(exception, stackTrace);
              },
              fit: fit,
              width: width,
              height: height,
            );
          },
        );
      }
    }