I'm having an issue with CachedNetworkImageProvider using Flutter

Question

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.

So I did it for one that didn't have a profile image, it was blank of course. And I did it for one that has a photo. Here it is firebasestorage.googleapis.com/v0/b/linkme-app.appspot.com/o/… — Indigo
Does the on with this link load? or is it only the blank one that doesn't load? — JideGuru
Yes the one with the link loads. It's the blank one that doesn't. It doesn't even show a null value. — Indigo

JideGuru JideGuru · Accepted Answer · 2020-06-08T22:06:54

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,
          ),
        ),
      ),
    );
  }

I'm having an issue with CachedNetworkImageProvider using Flutter

1 Answers