![[Flutter] Convert image to base64](/assets/images/category/flutter/background.avif)
Outline
When you send the image taken by the photo shooting function in Flutter to the server, sometimes you need to send it in the base64 format. In this blog post, I will show you how to convert the image to the base64 format and how to show the base64 format image on the screen.
Photo shooting feature
In order to implement the photo shooting feature in Flutter, you need to use the Camera plugin. If you want to know how to implment the photo shooting feature using the Camera plugin, please refer to the previous blog post.
Convert image to base64
In order to convert the image taken by the Camera plugin or the image stored in the device to the base64 format, you need to use the base64Encode function of the dart:convert package as follows.
import 'dart:io';
import 'dart:convert';
...
final image = await _cameraController.takePicture();
final bytes = File(image.path).readAsBytesSync();
final image64 = base64Encode(bytes);
...
First, read the imate by using the File of dart:io, and then convert it to the base64 format by using the base64Encode function of the dart:convert package.
Show base64 format image
In order to show the base64 format image received from the server on the screen, you need to convert the base64 format image to the byte array by using the Base64Decoder, and then show it on the screen by using the Image.memory as follows.
...
final _byteImage = Base64Decoder().convert(base64Image);
...
return Image.memory(_byteImage);
...
Completed
Done! We’ve seen how to convert the image to the base64 format and show the base64 format image on the screen in Flutter. When you need to send and receive the image in the base64 format according to the API specification of the server, please refer to this blog post.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
