'type 'Image' is not a subtype of type 'ImageProvider<Object>' in type cast

I'm using the image picker in flutter and trying to get the image. Before I select the image it appear like this:

Before Upload Image

enter image description here

After Upload Image

enter image description here

here is the code:

backgroundImage: _pickedImage != null
          ? Image.file(_pickedImage!) as ImageProvider
          : const AssetImage('assets/images/profile-icon.png'),

How should solve this error?

Updated Error

enter image description here

https://codeshare.io/oQpBvX



Solution 1:[1]

Use FileImage instead like so:

backgroundImage: _pickedImage != null
          ? FileImage(_pickedImage!)
          : const AssetImage('assets/images/profile-icon.png'),

Solution 2:[2]

///I got the same issue while I am checking image is null or not I am using a container to show the image Hope this will help you,Thanks
    //////image inside a container 
        
         Container(
                                                height: 120,
                                                width: 120,
                                                decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  shape: BoxShape.circle,
                                                  image:DecorationImage(
                                                      fit: BoxFit.cover,
                                                      image: provider.currentLoggedInUser!.profilePicture!= null?
                                                      NetworkImage(provider.currentLoggedInUser!.profilePicture.toString())
                                                          :AssetImage('assets/managerPicture.jpeg') as ImageProvider),
                                                  border: Border.all(
                                                      color: AppColors.white, width: 2.0),
                                                ),
                                              ),
                                            ],
                                          ),
    

////you can also use the CachedNetworkImage plugin

ChachedNetworkImage

     CachedNetworkImage(
          maxHeightDiskCache: 100,
         imageUrl: provider.currentLoggedInUser!.profilePicture.toString(),
 imageBuilder: (context, imageProvider) => Container(
       height: 120,
       width: 120,
       decoration: BoxDecoration(
       shape: BoxShape.circle,
       image: DecorationImage(
       image: imageProvider, fit: BoxFit.cover),
       border: Border.all(
       color: AppColors.white, width: 2.0),
    
              ),
                 ),
     placeholder: (context, url) =>
    const CircularProgressIndicator(),
    errorWidget: (context, url, error) => Container(
     height: 120,
      width: 120,
      decoration: BoxDecoration(
      color: Colors.white,
      shape: BoxShape.circle,
      image:DecorationImage(
      fit: BoxFit.cover,
      image: AssetImage('assets/managerPicture.jpeg')),
      border: Border.all(
      color: AppColors.white, width: 2.0),
              ),
            ),
      fadeOutDuration: const Duration(seconds: 1),
      fadeInDuration: const Duration(seconds: 3),
          ),


  

Solution 3:[3]

This is what you are looking for:

backgroundImage: _pickedImage != null
          ? FileImage(_pickedImage!)
          : AssetImage('assets/images/profile-icon.png'),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Josteve
Solution 2 Vishal_VE
Solution 3