How to use Image.file widget in flutter - flutter

Question

'''
I/flutter ( 7954): The following FileSystemException was thrown resolving an image codec:
I/flutter ( 7954): Cannot open file, path = 'image.png' (OS Error: No such file or directory, errno = 2)
I/flutter ( 7954):
I/flutter ( 7954): When the exception was thrown, this was the stack:
I/flutter ( 7954): #0 _File.open.<anonymous closure> (dart:io/file_impl.dart:366:9)
I/flutter ( 7954): (elided 13 frames from dart:async)
I/flutter ( 7954): ...
I/flutter ( 7954):
I/flutter ( 7954): Path: image.png
I/flutter ( 7954): ════════════════════════════════════════════════════════════════════════════════════════════════════
I am using image.file to display the widget but it throws the below exception how to solve that and I add my code as image.what is the major difference between image.asset widget and image.file widget.Thanks in advance.

Answer 1

You need to add the correct location of the file:
File file = new File('directoryLocation/image.png');
Another way to load images, is to add them to the assets folder in the project, then in the pubspec.yaml, you can do the following:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
Then do:
Widget build(BuildContext context) {
return Image(image: AssetImage('assets/my_icon.png'));
}
Check the docs:
https://flutter.dev/docs/development/ui/assets-and-images

Answer 2

Image.asset is used to load images from your projects assets folder. As because its already available in the project and pretty straight foreword to use.
Image.asset('assets/image.jpg');
On the other hand Image.file is used to load images from devices internal/external storage. This way you have to locate the image using ImagePicker or any other library to get the path of the image. Using this path create a File object and provide it to Image.file.
String path = 'your/image/path/here';
File imageFile = File(path);
Widget image = Image.file(imageFile);