I'm having an issue with CachedNetworkImageProvider using Flutter

Viewed 2798

I've been at this for a couple of hours and I've looked at a bunch of issues that seemed to be similar to mine. I'm finding that a lot of the "fixes" are a bit outdated and aren't effective with the newer version of flutter. I'm currently on 1.17.2 and I'm using cached_network_image ^2.2.0+1.

So I am trying to display the a user profile photo with a generic placeholder if there's no photo yet or I'm pulling the save photo from Firebase, if they do have one.

Here's the snippet of code

_buildUserTile(User user) {
    return ListTile(
      leading: CircleAvatar(
        radius: 20.0,
        backgroundImage: user.profileImageUrl == null
            ? AssetImage('assets/images/user_placeholder.png')
            : CachedNetworkImageProvider(user.profileImageUrl),
      ),
      title: Text(user.name),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => ProfileScreen(
            currentUserId: Provider.of<UserData>(context).currentUserId,
            userId: user.id,
          ),
        ),
      ),
    );
  }

So when I run the program, it shows the circle avatar as a blue circle and this is the error I'm getting...

════════ Exception caught by image resource service ════════════════════════════ The following ArgumentError was thrown resolving an image codec: Invalid argument(s): No host specified in URI

When the exception was thrown, this was the stack

  _HttpClient._openUrl  (dart:_http/http_impl.dart:2282:9)
  _HttpClient.openUrl  (dart:_http/http_impl.dart:2200:7)
  IOClient.send 
  package:http/src/io_client.dart:33
  HttpFileService.get 
  package:flutter_cache_manager/…/web/file_service.dart:32
  WebHelper._download 
  package:flutter_cache_manager/…/web/web_helper.dart:76

  Image provider: CachedNetworkImageProvider("", scale: 1.0) 
  Image key: CachedNetworkImageProvider("", scale: 1.0): CachedNetworkImageProvider("", scale: 1.0)

-Sorry for the ugly format

So it's saying No host specified in URI. I'm not sure what I'm doing wrong and I'm not sure how to fix this. I'm very new to flutter. Help would be greatly appreciated. Thanks! Please let me know if any more detail is needed.

1 Answers

You seem to be getting that error because your link is blank. If you want to display the asset image when the link is blank user.profileImageUrl.isEmpty. code below:

_buildUserTile(User user) {
    return ListTile(
      leading: CircleAvatar(
        radius: 20.0,
        backgroundImage: user.profileImageUrl == null || user.profileImageUrl.isEmpty
            ? AssetImage('assets/images/user_placeholder.png')
            : CachedNetworkImageProvider(user.profileImageUrl),
      ),
      title: Text(user.name),
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => ProfileScreen(
            currentUserId: Provider.of<UserData>(context).currentUserId,
            userId: user.id,
          ),
        ),
      ),
    );
  }
Related