Flutter – Convert an Image into Base64 String

Base64 encoding is used to convert bytes that have binary or text data into ASCII characters. Encoding prevents the data from getting corrupted when it is transferred or processed through a text-only system. In this article, we will discuss how to convert an image into Base64 String. A sample video is given below to get an idea about what we are going to do in this article.

How to use it?

Dart

// path of image
String _imagePath = "Image path her";

// convert image into file object
File _imageFile = File(_imagePath);

// Read bytes from the file object
Uint8List _bytes = await _imageFile.readAsBytes();

// base64 encode the bytes
String _base64String = base64.encode(_bytes);

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in VS code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package into the main file

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

void main() {
    runApp(RunMyApp());
}

Step 3: Creating a Stateful Widget

Now we have to create a Stateful widget because our application does change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatefulWidget {
    const RunMyApp({super.key});
    @override
    State<RunMyApp> createState() => _RunMyAppState();
    }
    class _RunMyAppState extends State<RunMyApp> {
    @override
    Widget build(BuildContext context) {
     return MaterialApp();
    }
}

Step 4: Working with Scaffold

Scaffold enables us to set AppBar and body properties. of the AppBar. Further  AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
appBar: AppBar(
   title: Text('Image to base64 String'),
),
body: 
),

Step 5: Now in the body of the application we will show an asset image and create a button that calls the function that implements the Conversion of the image in the base64 string

Center(
       child: Column(
            children: [
              Container(
                child: Image.asset('assets/gfglogo.png'),
              ),
              ElevatedButton(
                onPressed: () {
                  ImagetoBase64();
                },
                child: Text('Convert'),
              ),
              Text(
                base64String,
                style: TextStyle(overflow: TextOverflow.ellipsis),
              )
            ],
          ),
        ),

In the above code,  we have three children of columns that are image, button, and text that will print base64 string in the body of the scaffold. We have done our user interface part.

On pressed property of the button, we call the method ImagetoBase64 that has not been created yet, let’s create it.

Step 6: ImagetoBase64 function

String base64String = '';

ImagetoBase64() async {
    // path of image
    String _imagePath = "assets/gfglogo.png";
    File _imageFile = File(_imagePath);

    // Read bytes from the file object
    Uint8List _bytes = await _imageFile.readAsBytes();

    // base64 encode the bytes
    String _base64String = base64.encode(_bytes);
    setState(() {
      base64String = _base64String;
    });
}

Final Code

Dart

import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:convert';
import 'dart:typed_data';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  String base64String = '';

  ImagetoBase64() async {

    // path of image
    String _imagePath = "assets/gfglogo.png";
    File _imageFile = File(_imagePath);

    // Read bytes from the file object
    Uint8List _bytes = await _imageFile.readAsBytes();

    // base64 encode the bytes
    String _base64String = base64.encode(_bytes);
    setState(() {
      base64String = _base64String;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image to Base64 String'),
        ),
        body: Center(
          child: Column(
            children: [
              Container(
                child: Image.asset('assets/gfglogo.png'),
              ),
              ElevatedButton(
                onPressed: () {
                  ImagetoBase64();
                },
                child: Text('Convert'),
              ),
              Text(
                base64String,
                style: TextStyle(overflow: TextOverflow.ellipsis),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Note: Base64 String in the output is the ellipsis (three dots) because the base64 string is large and causes text overflow from the screen. That is why we use the ellipsis to prevent text overflow.