flutterhttpdartsocketexception

Flutter CachedNetworkImage errors: (CacheManager: Failed to download file) and (SocketException or HttpException)


I'm using the cached_network_image library. If I set it up like this:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: CachedNetworkImage(
          imageUrl: "https://example.com/image/whatever.png",
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
       ),
      ),
    );
  }
}

with a URL that is invalid (either because it returns a 404 or the server refuses the connection), then my IDE freezes and gives one of the following errors:

HttpExceptionWithStatus (HttpException: Invalid statusCode: 404, uri = https://example.com/image/whatever.png)

or this (if I change it to a non-existent host):

SocketException (SocketException: Failed host lookup: 'ksdhfkajsdhfkashdfkadshfk.com' (OS Error: No address associated with hostname, errno = 7))

enter image description here

What I would expect is for the CachedNetworkImage widget to just show the errorWidget, but it doesn't.


Solution

  • The creator of cached_network_image says (source):

    If you have break on exceptions enabled the debugger stops, but that's because the dart VM doesn't always know whether an exception is caught or not. If you continue this still shouldn't freeze your app.

    That was the key I needed. It is just the debugger stopping. You can hit the continue button or disable stopping on uncaught exceptions. The CachedNetworkImage widget will then show the errorWidget as expected.

    In VS Code you can uncheck this in the bottom left of the debug pannel.

    enter image description here

    enter image description here

    I believe there is a similar setting in Android studio based on this post.