Fix “The argument type ‘ImageNetwork’ can’t be assigned to the parameter type ‘ImageProvider?'” in Flutter

Do you ever get an error message that says “The argument type ‘ImageNetwork’ can’t be assigned to the parameter type ‘ImageProvider?'”? If so, don’t worry – you’re not alone. This is a common problem that many people experience, but it can be fixed fairly easily.

If you get this error in Flutter, it means that you are passing the wrong type of object to the parent widget of Image.network(). In our example, it is CircleAvatar.

This is the code I’m using to provide an image to CircleAvatar:

CircleAvatar(
          backgroundImage: ImageNetwork(
            image: imageUrl,
            imageCache: CachedNetworkImageProvider(imageUrl),
            height: 150,
            width: 150,
            duration: 1500,
            curve: Curves.easeIn,
            onPointer: true,
            debugPrint: false,
            fullScreen: false,
            fitAndroidIos: BoxFit.cover,
            fitWeb: BoxFitWeb.cover,
            borderRadius: BorderRadius.circular(70),
            onLoading: const CircularProgressIndicator(
              color: Colors.indigoAccent,
            ),
            onError: const Icon(
              Icons.error,
              color: Colors.red,
            ),
            onTap: () {
              debugPrint("©gabriel_patrick_souza");
            },
          ),
          backgroundColor: Colors.transparent,
          radius: 100,
        ),

To fix this, you only need to use a property that returned ImageProvider of the main image widget. These properties are often named as image or imageCache.

CircleAvatar(
          backgroundImage: ImageNetwork(
            image: imageUrl,
            imageCache: CachedNetworkImageProvider(imageUrl),
            height: 150,
            width: 150,
            duration: 1500,
            curve: Curves.easeIn,
            onPointer: true,
            debugPrint: false,
            fullScreen: false,
            fitAndroidIos: BoxFit.cover,
            fitWeb: BoxFitWeb.cover,
            borderRadius: BorderRadius.circular(70),
            onLoading: const CircularProgressIndicator(
              color: Colors.indigoAccent,
            ),
            onError: const Icon(
              Icons.error,
              color: Colors.red,
            ),
            onTap: () {
              debugPrint("©gabriel_patrick_souza");
            },
          ).imageCache,
          backgroundColor: Colors.transparent,
          radius: 100,
        )

CircleAvatar(
          backgroundImage: Image.network("https://cdn.pixabay.com/photo/2022/04/18/19/51/rocks-7141482_960_720.jpg").image,
          backgroundColor: Colors.transparent,
          radius: 100,
        )