How to encode and decode Base64 and Base64Url in Flutter / Dart

dart flutter base64 base64url

49,295

The dart:convert library contains an encoder and decoder for Base64 and Base64Url. However, they encode and decode Lists of integers, so for strings you also need to encode and decode in UTF-8. Rather than doing these two encodings separately, you can combine them with fuse.

You need to have the following import:

import 'dart:convert';

Base64

String credentials = "username:password";
Codec<String, String> stringToBase64 = utf8.fuse(base64);
String encoded = stringToBase64.encode(credentials);      // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = stringToBase64.decode(encoded);          // username:password

Note that this is equivalent to:

String encoded = base64.encode(utf8.encode(credentials)); // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = utf8.decode(base64.decode(encoded));     // username:password

Base64Url

String credentials = "username:password";
Codec<String, String> stringToBase64Url = utf8.fuse(base64Url);
String encoded = stringToBase64Url.encode(credentials);      // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = stringToBase64Url.decode(encoded);          // username:password

Again, this is equivalent to:

String encoded = base64Url.encode(utf8.encode(credentials)); // dXNlcm5hbWU6cGFzc3dvcmQ=
String decoded = utf8.decode(base64Url.decode(encoded));     // username:password

Suragch about 3 years
I want to encode the following string in Base64Url in Flutter and decode it in on a Dart server.
```
"username:password"
```
How do I do that? And how do I do it in Base64?
- Richard Heap almost 5 years
  
  Possible duplicate of How to pass basic auth credentials in API call for a Flutter mobile application?
- Herohtar almost 5 years
  
  Also related How to native convert string -> base64 and base64 -> string
- Suragch almost 5 years
  
  I would like to include Base64Url since sometimes it is a requirement. The linked questions, while useful, don't ask or answer that.
pskink almost 5 years

instead of constructs like utf8.decode(base64.decode(credentials)); use Codec::fuse() method
Suragch almost 5 years

@pskink, At first I couldn't wrap my mind around what was happening (the expanded form felt more readable), but then I realized that you didn't need to switch the order of utf8 and base64. You just use decode on the fused method. So, yes, much easier.
pskink almost 5 years

this is because fuse() method docs say: "When encoding, the resulting codec encodes with this before encoding with other. When decoding, the resulting codec decodes with other before decoding with this."
pskink almost 5 years

btw fuse is not limited to two codecs - you can call multiple fuse methods to chain more than two codecs
Suragch almost 5 years

@pskink I also found this one: Base64Encoder().convert(credentials.codeUnits), where you can also do Base64Encoder.urlSafe(). What are your thoughts on this? It seems more readable to me.
pskink almost 5 years

this is Base64Codec.encoder - the same like base64.encoder