1

So, I want to do a simple thing but for some reasons it is not working. I get a base64 string from the server which I need to convert to an image. When I put that retrieved in the websites like base64guru, it works. However I'm unable to do the same in my flutter app.

Here's what my code looks like:

final decodedBytes = base64Decode(base64String);
var file = File("userPdf.png");
file.writeAsBytesSync(decodedBytes);
return Image.file(file);

When this is executed, I get an error stating :

FileSystemException: Cannot open file, path = 'userPdf.png (OS Error: Read-only file system, errno = 30)

Any idea what I'm doing wrong and how I can do this ?? Any help would be appreciated.

Divyam Dhadwal
  • 395
  • 3
  • 19
  • `File("userPdf.png").writeAsBytesSync(...)` will try to create and write to a file in whatever the current directory is. What is your current directory? You likely don't have permission to write to it. – jamesdlin May 07 '22 at 08:07
  • and isnt better to `return Image.memory(decodedBytes);` instead of `return Image.file(file);`? do you really need that file? – pskink May 07 '22 at 08:10
  • @jamesdlin It might be the case. Sorry I'm new to working with files in flutter. Any idea how I can add the permission as well as know what my current directory is ?? From what I know, path provider is required. But any idea how I can use it to get it to work? – Divyam Dhadwal May 07 '22 at 08:11
  • @pskink I tried Image.memory first. But it doesn't work. It gives me an exception stating : Invalid image data – Divyam Dhadwal May 07 '22 at 08:13
  • so `Image.file` will not work as well, first you have to find out why your data is invalid - for example print first 8-12 bytes of `decodedBytes` in **HEX**, what do you see? – pskink May 07 '22 at 08:17
  • @pskink Interesting. But as I mentioned, when I put my base64 in the websites that convert base64 to Image online, it works just fine. If the data is invalid (let's assume), then the question is how can those websites make an image out of it ? And that too, the correct one. – Divyam Dhadwal May 07 '22 at 08:20
  • what can i say if i dont know your `decodedBytes`? – pskink May 07 '22 at 08:21
  • @pskink - It looks something like this : [37, 80, 68, 70, 45, 49, 46, 51, 10, 51, 32, 48, 32,.....] – Divyam Dhadwal May 07 '22 at 08:31
  • It is pdf data (%PDF) - no wonder `Image.memory` does not like it – pskink May 07 '22 at 08:38

2 Answers2

1

Well, this got resolved when I wrapped SfPdfViewer.memory(bytes) inside a Container. Though, not sure why it wasn't working without a Container.

The whole solution:

Uint8List bytes = base64.decode(pdf);
return Container(
  child: SfPdfViewer.memory(bytes),
);

Package used : syncfusion_flutter_pdfviewer

Divyam Dhadwal
  • 395
  • 3
  • 19
0

There is a simple way

Image.memory(base64Decode(base64String));
Anand
  • 4,355
  • 2
  • 35
  • 45
  • Unfortunately, It doesn't seem to work. It gives "Invalid Image data". I have tried trimming the data before i decode it..no luck either. – Divyam Dhadwal May 07 '22 at 09:56
  • https://base64.guru/converter/decode/file – Anand May 07 '22 at 10:16
  • first go to this site and check your base64 is valid or not – Anand May 07 '22 at 10:16
  • if the base64 is valid , the above code will surely work – Anand May 07 '22 at 10:17
  • Yes. I checked on this site only. It's giving the expected results. That's the most weird thing that's happening right now. Actually this base64 string is a pdf and this site gives the expected pdf (with the correct image in it). – Divyam Dhadwal May 07 '22 at 10:36
  • @pskink Tried using the named constructor (SfPdfViewer.memory (bytes)) from syncfusion_flutter_pdfviewer package..It's showing me a blank page. – Divyam Dhadwal May 07 '22 at 10:51