Showing images from local app directory in Flutter

Question

I try to show images from local app directory in Flutter. Saving the image works well. After I take a picture I save the final directory string in the database. Then I try to show all images in a Listview.

How I save images:

Future<void> _addPictureToGallery() async {
      final picker = ImagePicker();
      final imageFile =
          await picker.getImage(source: ImageSource.camera, maxWidth: 600);

      final appDir = await syspath.getApplicationDocumentsDirectory();

      final fileName = path.basename(imageFile.path);

      final savedImage =
          File(imageFile.path).copy('${appDir.path}/albums/$albumID/$fileName');

      picturesData.add(Picture(
          album: albumID,
          path: '${appDir.path}/albums/$albumID/$fileName'.toString(),
          timestamp: Timestamp.now()));
    }

First I copy the image to the app directory. Then I save the image path in the database.

After that I want to show all images with Image.file . But this step is not working.

My code

body: Center(
        child: FutureBuilder(
            future: picturesData.getAll(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData ||
                  snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                return ListView.builder(
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Image.file(File(snapshot.data[index].path));
                    });
              }
            }),
      ),

The snapshot.data[index].path variable is the correct image path, I´ve checked this by output a Text widget with this variable. (For example: /var/mobile/Containers/Data/Application/884283C4-FC82-4DDB-B0C2-43BABC2D660E/Documents/albums/6/image_picker_ACF15E5E-FDB1-4B65-A56C-5B707F5EEECB-34279-00002AD6A23369E1.jpg

But if I try to output an image with this variable, I just get the error: Cannot open file, path = '/var/mobile/Containers/Data/Application/884283C4-FC82-4DDB-B0C2-43BABC2D660E/Documents/albums/6/image_picker_ACF15E5E-FDB1-4B65-A56C-5B707F5EEECB-34279-00002AD6A23369E1.jpg' (OS Error: No such file or directory, errno = 2)

But the image exists and the path is correct..... What could be the issue here?

Answer 1

You need to use Image.asset no need for File :

  String _path = "";

  Future<void> _addPictureToGallery() async {
    final picker = ImagePicker();
    final imageFile =
        await picker.getImage(source: ImageSource.gallery, maxWidth: 600);

    setState(() {
      _path = '${imageFile.path}';
    });
  }

//build

return  _path.isNotEmpty ? Image.asset(_path) : Container();