In this tutorial, I will show you how to encode Image file to Base64 & decode Base64 String to Image in Dart/Flutter using dart:convert
library.
Related Posts:
– Dart/Flutter Constructors tutorial with examples
– Dart/Flutter String Methods & Operators tutorial with examples
– Dart/Flutter List Tutorial with Examples
– Dart/Flutter Map Tutorial with Examples
Overview
1. Encode Image to Base64
There are two steps to encode an Image file to Base64 String:
- convert our Image file to
bytes
with the help of dart:io library.
import 'dart:io' as Io;
final bytes = await Io.File(image).readAsBytes();
// or
final bytes = Io.File(image).readAsBytesSync();
bytes
to Base64.It is the shorthand for base64.encode()
.
String base64Encode(List<int> bytes) => base64.encode(bytes);
2. Decode Base64 to Image
To convert a Base64 String into Image, we need to do 2 steps:
- use base64Decode() function which is shorthand for
base64.decode()
to decode Base64 tobytes
.
Uint8List base64Decode(String source) => base64.decode(source);
bytes
to Image file using dart:io writeAsBytes()
or writeAsBytesSync()
.import 'dart:io' as Io;
var file = Io.File(image);
await file.writeAsBytes(bytes);
// or
file.writeAsBytesSync(bytes);
Practice
1. Encode Image to Base64
import 'dart:io' as Io;
import 'dart:convert';
main() {
final bytes = Io.File('bezkoder.png').readAsBytesSync();
String img64 = base64Encode(bytes);
print(img64.substring(0, 100));
}
Output:
iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAMAAABIw9uxAAADAFBMVEX///8PDxEHBwkODhAQEBIFBQcTExUGBggRERMSEhQICAoa
2. Decode Base64 String to Image
import 'dart:io' as Io;
import 'dart:convert';
main() {
// img64 = iVBORw0KGgoAAAANSUhEUgAAB...
final decodedBytes = base64Decode(img64);
var file = Io.File("decodedBezkoder.png");
file.writeAsBytesSync(decodedBytes);
}
Check decodedBezkoder.png, you can see that it is the same as bezkoder.png.
Further Reading
Related Posts:
– Dart/Flutter Constructors tutorial with examples
– Dart/Flutter String Methods & Operators tutorial with examples
– Dart/Flutter List Tutorial with Examples
– Dart/Flutter Map Tutorial with Examples
This is the kind of information that should be shared around the net. Thanks =)
Pretty nice tutorial. I hope you write more Dart tutorials soon!
But how to do if we’re having multiple images
This tutorial means a lot to me!! Thanks a ton!!!!
Thank you for your tutorial! It is really useful. Still, I am facing an issue when loading my images from my assets list. For instance, in my assets I have a list of local images I need to use:
assets:
– assets/google_logo.png
– etc…
When trying to open the image, it does not find the image on the path. To surpass that, I have used rootBundle.loadString with the imagem path in the assests (‘assets/’ + image name).
Now, when I try to open it, it complains about non utf-8 file. Any clues on what I am doing wrong?
Thanks once again!
thank you
Nice tutorial, thanks!
Thank you for this tutorial. It’s not long but useful for me to work with Base64 image in Dart.
I like the way you write this Dart tutorial, simple and clean!
Excellent