Flutter BASE64 Encode/Decode - How to convert Base64 string to Image

Last updated Jul 03, 2021

In flutter few scenarios we need to convert Base64 String to Image. How we can convert BASE64 string into Image with Flutter? We can convert a Uint8List to a Flutter Image widget using the Image.memory constructor. With Base64Encoder(), Base64Codec() we can convert it to Image. Updated code to support nullsafety variables. Define variables with late modifier if intialization later

Before going to see the example let see how to convert image to Base64 String and String to Image.

Encode Image to Base64 from Online URL

There are two steps

Step 1: Convert Image to bytes

Convert Image to Byte from Online URL by using the http package

(() async {
  http.Response response = await http.get(Uri.parse("https://wallpaper-house.com/data/out/9/wallpaper2you_366962.jpg"),
  );

Now from http response we will get bytes by reponse.bodyBytes property.

Step 2:

Now its convert bytes to base64 string by using the Base64Encoder() class contains convert() method

_base64 = Base64Encoder().convert(response.bodyBytes);

This string contains the image in Base64 format

Convert Local Image file to Base64

Step 1: Convert Local Image to bytes

import 'dart:io' as Io;

final bytes = await Io.File("image Path").readAsBytes();
// or
final bytes = Io.File("image Path").readAsBytesSync();

Step 2: Convert bytes to String

to convert bytes to string by using dart:convert library base64Encode() function to encode bytes to Base64 this class contains method base64.encode().

String base64Encode(List bytes) => base64.encode(bytes);

Below Example will show you how to convert Base64 String to Image in flutter and show on Image widget

import 'package:flutter/material.dart';

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:typed_data';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Base64 String',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State {
  late String _base64="";

  @override
  void initState() {
    super.initState();
    (() async {
      http.Response response = await http.get(Uri.parse("https://wallpaper-house.com/data/out/9/wallpaper2you_366962.jpg"),
      );
      if (mounted) {
        setState(() {
          _base64 = Base64Encoder().convert(response.bodyBytes);
        });
      }
    })();
  }

  @override
  Widget build(BuildContext context) {
    if (_base64 == null||_base64.isEmpty)
      return new Container();
    Uint8List bytes = Base64Codec().decode(_base64);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Base64 String'),
        backgroundColor: Colors.orange,),
      body: Container(
          child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                 child: Card(
                     child: Image.memory(bytes,fit: BoxFit.cover,)),
      ))),


    );
  }
}

Base64 String to Image

Conclusion: In this article we covered Flutter Base64 encode/decode and convert base64 string to image

Tags: Base64, Image, Flutter

Article Contributed By :

19653 Views

Projects By category