Flutter web image_picker no implementation found - image

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!

Answer 1

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.