CODEWITHSUNDEEP
flutterdartimagepicker
kiku
kiku

Reputation: 167

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

Upvotes: 4

Views: 6284

Answers (5)

Shohruh Sharipov
Shohruh Sharipov

Reputation: 1

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

Upvotes: 0

Porayman
Porayman

Reputation: 26

Do this instead, render your picked image with an image.file() widget then toggle the container with the image.file()

child: image == null
        ? Container(
            width: 400.w,
            height: 300.h,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: ExactAssetImage(imageUrl), fit: BoxFit.cover)),
          )
        : Image.file(
            image!,
            width: 160.w,
            height: 160.h,
            fit: BoxFit.cover,
          )

Upvotes: 1

Jahn E.
Jahn E.

Reputation: 1313

This is what you are looking for:

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

Upvotes: 2

Vishal_VE
Vishal_VE

Reputation: 2137

///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),
          ),

Upvotes: 0

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12673

Use FileImage instead like so:

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

Upvotes: 2

Related Questions