Image Watermark Error: Unhandled Exception: FileSystemException: Cannot open file, path =''

Question

New to flutter and coding here. I followed the guide here for how to add a watermark to an image. However, I am not using image picker, but using an image stored within Firebase, and a watermark that is an asset.

The code builds fine, but when I press the button to generate the watermarked image and eventually share it, I get the following error

Unhandled Exception: FileSystemException: Cannot open file, path = 'firebase url path' (OS Error: No such file or directory, errno = 2)

It is recognizing the path to the image in Firebase, but for some reason is saying the file isn't available. The error is being thrown on the 'decodeImage' portion of the code below.

Code snippet below

import '../backend/image_share/image_share.dart';
import 'package:image/image.dart' as ui;
import 'dart:io';

onPressed: () async {
    //first image is a firebase path
    final pickedFile = File('firebae path');
    //second image is watermark and an asset
    final watermark = File('assets/images/Share-small.png');
    ui.Image originalImage = ui.decodeImage(pickedFile.readAsBytesSync());
    ui.Image watermarkImage = ui.decodeImage(watermark.readAsBytesSync());
    ui.drawImage(originalImage, watermarkImage);
    ui.drawString(originalImage, ui.arial_24, 100, 120, 'Test!');
    List<int> wmImage = ui.encodePng(originalImage);
    final uploadUrl = await uploadData('new firebase data', wmImage);
    
    final 'new firebase data' = FB collection(sharedImage: uploadUrl);

I am having trouble figuring out how to read/upload the image file before manipulating them. Any help is greatly appreciated!

Answer 1

The File class can only read/write files that are on the local system. It does not have any knowledge of files in Cloud Storage.

You will need to:

1. download the file from Cloud Storage,
2. add the watermark on the device, and then
3. write the resulting file back to Cloud Storage.