0

I am using Image Package to resize an image (actually down size) after picking it up using file_picker package but when I try to show it in CircleAvatar Widget I got this runtime error:

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

enter image description here

here are some of my imports and fields:

import 'package:image/image.dart' as IM;
//....
  IM.Image? profilePhoto;

here is my function that gets the image and then resize it:

void changePhoto() async {
    final result = await FilePicker.platform.pickFiles(
        type: FileType.custom,
        allowedExtensions: ['JPEG', 'PNG', 'GIF', 'WebP', 'BMP', 'WBMP']);
    if (result == null) return;

    setState(() {
      IM.Image image =
          IM.decodeImage(File(result.files.first.path!).readAsBytesSync()) as IM.Image;
      IM.Image thumbnail = IM.copyResize(image, width: 125);
      // File('out/thumbnail-test.png').writeAsBytesSync(IM.encodePng(thumbnail));
      profilePhoto = thumbnail;
    });

    // await new Future.delayed(const Duration(seconds: 5));
  }

and here is my widget code:

child: CircleAvatar(
                                backgroundImage: profilePhoto != null
                                    ? profilePhoto as ImageProvider<Object>
                                    : AssetImage('images/technician_avatar.jpg')
                                        as ImageProvider,
                                radius: 80,
                              )

Just a side note: Later I wanna upload it to cloud Firestore. I tried to use image_picker package but it has an annoying thing that it changes the name of the file and I couldn't find a way around it.

MadMax
  • 483
  • 1
  • 4
  • 12
  • 1
    You cannot set a variable to Image and cast it to ImageProvider. Did you try to call the "getBytes" on profilePhoto and pass it to a Image.memory() ? – VincentDR Nov 07 '22 at 14:56
  • @VincentDR I couldn't find a way to deal with this type provided by "Image" package – MadMax Nov 07 '22 at 15:00
  • 1
    I edited my comment, try to get the Uint8List of profilePhoto by calling "getBytes" and use this data. Like here https://stackoverflow.com/questions/58870443/flutter-image-object-to-imageprovider#:~:text=18-,Please,-Use%20Uint8List%20and – VincentDR Nov 07 '22 at 15:02
  • @VincentDR Thank u! I tried this "MemoryImage(profilePhoto!.getBytes())" , but now I get these exceptions and the image isn't shown : - Failed to decode image. - Failed to create image decoder with message 'unimplemented'Input contained an error. - Another exception was thrown: Exception: Invalid image data. – MadMax Nov 07 '22 at 23:04

1 Answers1

0

Convert Image to Bytes Obj after picked up image and then use MemoryImage in CircularAvatar

Ref this https://stackoverflow.com/a/70433426/8397639

Chit Ye Aung
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 09 '22 at 01:04