type 'Image' is not a subtype of type 'ImageProvider

Question

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

After Upload Image

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

https://codeshare.io/oQpBvX

Change it to `FileImage(_pickedImage)` – Jahn E. Jan 31 '22 at 17:31 — Jahn E., Jan 31 '22 at 17:31

score 2 · Answer 1 · answered Jan 31 '22 at 17:32

2

Use FileImage instead like so:

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

answered Jan 31 '22 at 17:32

Josteve

11,459
1
23
35

It can't work too. I tried before. I updated the error on question. – kiku Jan 31 '22 at 17:39
1

Hey @kiku, it seems as if you have used `const` in your `DecorationImage` or `BoxDecoration` or `Container`...Please remove it, it should work. – Josteve Jan 31 '22 at 17:44
Hey @Josteve, I sure that I not add any const there, i share the file in the link , u can help me take a look on there – kiku Jan 31 '22 at 17:52

Jahn E. · Answer 2 · 2022-01-31T20:48:06.667

1

This is what you are looking for:

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

edited Jan 31 '22 at 20:48

answered Jan 31 '22 at 17:33

Jahn E.

1,228
3
6
21

It can't work too. I tried before. I updated the error on question. – kiku Jan 31 '22 at 17:38

score 1 · Accepted Answer · answered Jun 17 '22 at 09:23

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

score 0 · Answer 4 · answered Jan 31 '22 at 18:06

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

It can't work too, I wonder what is the `sdk: ">=2.15.0 <3.0.0" ` u guys using — kiku, Feb 01 '22 at 08:53

shohruh sharipov · Answer 5 · 2022-10-02T02:49:37.277

0

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

edited Oct 02 '22 at 02:49

answered Oct 02 '22 at 02:49

shohruh sharipov

1
2

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Oct 04 '22 at 00:01

5 Answers5