Flutter web image_picker no implementation found

Question

I am using version 0.6.7+22 of the image_picker Flutter package to pick an image from the device in my Flutter web app. I call getImage function in a pop-up:

class _ImageVerificationPopUpState extends State<ImageVerificationPopUp> {
  File _image;
  final picker = ImagePicker();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text("Upload screenshot"),
      content: SizedBox(
        width: MediaQuery.of(context).size.width * 0.3,
        child: Center(
          child: _image != null
              ? SelectedImage(kIsWeb ? Image.network(_image.path) : Image.file(_image), () {
                  setState(() {
                    _image = null;
                  });
                })
              : SelectImageButton(_getImage),
        ),
      ),
      actions: [
        TextButton(onPressed: () => Navigator.of(context).pop(), child: Text("Cancel")),
        TextButton(
            onPressed: () {
              final ImageCubit imageCubit = BlocProvider.of<imageCubit>(context);
              imageCubit.uploadImage(_image);
              Navigator.pop(context);
            },
            child: Text("Upload"))
      ],
      backgroundColor: Color(0xFF333D81),
    );
  }

  Future<void> _getImage() async {
    final PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print("No image selected");
      }
    });
  }
}

After I press the button, it throws the following error:

Error: MissingPluginException(No implementation found for method pickImage on channel plugins.flutter.io/image_picker)
    at Object.throw_ [as throw] (http://localhost:7357/dart_sdk.js:5331:11)
    at platform_channel.MethodChannel.new._invokeMethod (http://localhost:7357/packages/flutter/src/services/system_channels.dart.lib.js:954:21)
    at _invokeMethod.next (<anonymous>)
    at http://localhost:7357/dart_sdk.js:39029:33
    at _RootZone.runUnary (http://localhost:7357/dart_sdk.js:38886:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:7357/dart_sdk.js:33872:29)
    at handleValueCallback (http://localhost:7357/dart_sdk.js:34432:49)
    at Function._propagateToListeners (http://localhost:7357/dart_sdk.js:34470:17)
    at _Future.new.[_completeWithValue] (http://localhost:7357/dart_sdk.js:34312:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:7357/dart_sdk.js:34335:35)
    at Object._microtaskLoop (http://localhost:7357/dart_sdk.js:39173:13)
    at _startMicrotaskLoop (http://localhost:7357/dart_sdk.js:39179:13)
    at http://localhost:7357/dart_sdk.js:34686:9

I already tried calling flutter clean, flutter pub get and rerunning my app, but it didn't help.
How can I solve this issue?

Thanks for your help in advance!

Annie Bevman Annie Bevman · Accepted Answer · 2021-04-29T14:35:04

Try adding the package image_picker_for_web to your pubspec.yaml file.

...
dependencies:
  ...
  image_picker: ^0.6.7
  image_picker_for_web: ^0.1.0
  ...
...

then modify your _getImage method:

Future<void> _getImage() async {
    final PickedFile pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
       if (kIsWeb) { // Check if this is a browser session
         _image = Image.network(pickedFile.path);
       } else {
         _image = Image.file(File(pickedFile.path));
       }
      } else {
        print("No image selected");
      }
    });
  }

I think this is what made it work for me. I was getting the same error message as you.

Flutter web image_picker no implementation found

1 Answers