How to Encode and Decode Base64 in Dart & Flutter

Discover the power of Base64 encoding and decoding in the Dart programming language and Flutter. Learn to easily transform and interpret binary data into concrete and easy-to-understand form.

What is Base64?

Base64 is a method for converting binary data into a textual representation that is universally supported in digital communication. This encoding scheme turns binary data into a string of ASCII characters, allowing it to be transmitted across text-only channels. Base64 provides data sharing without the possibility of special characters causing problems, making it a critical tool for data exchange across multiple technologies.

What is Dart?

Dart is a programming language created by Google that is used to create online and mobile applications. It is most often connected with the Flutter framework, which is used to develop cross-platform mobile apps. Dart prioritizes efficiency and performance, with features like as a strong type system, asynchronous programming, and a Just-In-Time (JIT) compiler that enables rapid development.

What is Flutter?

Flutter is an open-source UI (User Interface) software development toolkit created by Google. It is designed to help developers build natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is particularly known for its fast development process, expressive and flexible user interfaces, and native performance on various platforms.

Flutter uses the Dart programming language as its primary language.

Base64 Encoding & Decoding in Dart & Flutter

Using Dart’s Base64 encoding and decoding functions, you may easily convert binary data into a text-based format and vice versa. Dart has built-in libraries that make it straightforward to perform these operations and operate with Base64-encoded data.

To encode binary data into Base64 format, you can use the dart:convert library’s base64.encode() function. This function takes a list of bytes as input and returns the corresponding Base64-encoded string.

To decode a Base64-encoded string back to its original binary form, you can use the dart:convert library’s base64.decode() function. This function takes a Base64-encoded string as input and returns a list of bytes representing the original binary data.

Example of Base64 Encoding in Dart & Flutter

In this encoding example, the original text string is changed into a list of bytes using the utf8.encode() function. The bytes are then encoded into a Base64-encoded string using the base64.encode() function. Both the original text and the encoded text are shown in the output.

import 'dart:convert';
 
void main() {
  String originalText = "B64Encode";
  List<int> bytes = utf8.encode(originalText);
  String encodedText = base64.encode(bytes);
 
  print("Original Text: $originalText");
  print("Encoded Text: $encodedText");
}

Example of Base64 Decoding in Dart & Flutter

In this decoding example, we begin with a string that has been Base64 encoded. The encoded text is decoded using the base64.decode() method and returned as a list of bytes. We change the bytes into the original text string using utf8.decode(). Both the encoded and the decoded text are shown in the output.

import 'dart:convert';
 
void main() {
  String encodedText = "QjY0RW5jb2Rl";
  List<int> bytes = base64.decode(encodedText);
  String decodedText = utf8.decode(bytes);
 
  print("Encoded Text: $encodedText");
  print("Decoded Text: $decodedText");
}

Example Of Encoding An Image To Base64 (Uint8List To Base64)

In Flutter, encoding an image to Base64 entails reading the image file, turning it to an Uint8List (a list of bytes), and then encoding it to Base64 using the dart:convert library.

Here’s an example of how to encode a picture in Flutter to Base64:

import 'dart:convert';
import 'dart:io';
 
void main() {
  // Replace with the path to your image file
  String imagePath = 'path_to_your_image.png';
 
  // Read the image file as bytes
  File imageFile = File(imagePath);
  Uint8List bytes = imageFile.readAsBytesSync();
 
  // Encode the bytes to Base64
  String base64EncodedImage = base64Encode(bytes);
 
  // Print the Base64-encoded image
  print("Base64 Encoded Image:\n$base64EncodedImage");
}

In this example:

1. You specify the path to your image file in the imagePath variable.
2. The File class is used to read the image file as bytes. Make sure to replace 'path_to_your_image.png' with the actual path to your image file.
3. The base64Encode() function from the dart:convert library is used to encode the image bytes into Base64 format.
4. The resulting Base64-encoded image is printed to the console.

Example Of Decoding Base64 To An Image

In Flutter, decoding Base64 data back into an image entails taking the Base64-encoded string, decoding it to a list of bytes, and then producing an image from those bytes.

Here’s an example of how to decode Base64 data into an image:

import 'dart:convert';
import 'dart:typed_data';
import 'dart:io';
 
void main() {
  // Replace with your Base64-encoded image data
  String base64EncodedImage = "Your_Base64_Encoded_Image_Data";
 
  // Decode Base64 data to bytes
  Uint8List bytes = base64.decode(base64EncodedImage);
 
  // Create an image from the decoded bytes
  File imageFile = File('decoded_image.png'); // Output image file path
  imageFile.writeAsBytesSync(bytes);
 
  print("Image decoded and saved as ${imageFile.path}");
}

In this example:

1. Replace "Your_Base64_Encoded_Image_Data" with the actual Base64-encoded image data that you want to decode.
2. The base64.decode() function from the dart:convert library is used to decode the Base64-encoded string into a Uint8List (a list of bytes).
3. You create an image file (in this case, named 'decoded_image.png') to save the decoded image. You can specify the path and filename according to your needs.
4. Finally, the decoded image data is written to the image file using imageFile.writeAsBytesSync(bytes).

After running this code, the decoded image will be saved as the specified file, which you can then use or display as needed. Make sure to replace the placeholder "Your_Base64_Encoded_Image_Data" with your actual Base64-encoded image data.

Example Of Converting PDF To Base64

Here’s an example of how to convert a PDF file to Base64 in Flutter.

import 'dart:convert';
import 'dart:io';
 
void main() {
  // Replace with the path to your PDF file
  String pdfPath = 'path_to_your_pdf.pdf';
 
  // Read the PDF file as bytes
  File pdfFile = File(pdfPath);
  List<int> bytes = pdfFile.readAsBytesSync();
 
  // Encode the bytes to Base64
  String base64EncodedPDF = base64Encode(Uint8List.fromList(bytes));
 
  // Print the Base64-encoded PDF
  print("Base64 Encoded PDF:\n$base64EncodedPDF");
}

In this example:

1. You specify the path to your PDF file in the pdfPath variable.
2. The File class is used to read the PDF file as a list of bytes. Ensure that you replace 'path_to_your_pdf.pdf' with the actual path to your PDF file.
3. The base64Encode() function from the dart:convert library is used to encode the PDF bytes into Base64 format.
4. The resulting Base64-encoded PDF is printed to the console.

Remember to replace the file path with the actual path to your PDF file, and ensure that the PDF file exists in the specified location.