Flutter: Upload an image to Firebase Storage

Question

I have an image which I got from a Canvas PictureRecorder. Now I want to upload it to Firebase storage. My issue is converting it to a png file to upload. I don't know much about converting images, so not sure how to manipulate it in a way to upload as a png file.

final picture = recorder.endRecording();
final img = picture.toImage(640, 360);
final pngBytes = await img.toByteData();

final Directory systemTempDir = Directory.systemTemp;
final File file = await new File('${systemTempDir.path}/foo.png').create();
file.write?????(pngBytes);     <-- Not sure how to write the file here
final StorageReference ref =
      storage.ref().child('images').child('image.png');
final StorageUploadTask uploadTask =
      ref.putFile(file);

Answer 1

Got it!

final picture = recorder.endRecording();
final img = picture.toImage(640, 360);
final pngBytes = await img.toByteData(format: ImageByteFormat.png);
Uint8List finalImage = Uint8List.view(pngBytes.buffer);

final Directory systemTempDir = Directory.systemTemp;
final File file = await new File('${systemTempDir.path}/foo.png').create();
file.writeAsBytes(finalImage);
final StorageReference ref = storage.ref().child('images').child('image.png');
final StorageUploadTask uploadTask = ref.putFile(file);

Answer 2

You could use imagemagik to do your file conversions. This link gives you a reasonable amount of detail on how to do that so I won't dig in here. Alternatively, you could write a cloud function that does the conversions on the server. Depends on your use-case.

HTH.