Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

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

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.

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

http.Response response = await http.get(
        'https://thebhakti.com/wp-content/uploads/2019/01/mahakal.jpg',
      );
response.bodyBytes
          

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 Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

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


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

class MyHomePageState extends State {
  String _base64;

  @override
  void initState() {
    super.initState();
    (() async {
      http.Response response = await http.get(
        'https://thebhakti.com/wp-content/uploads/2019/01/mahakal.jpg',
      );
      if (mounted) {
        setState(() {
          _base64 = Base64Encoder().convert(response.bodyBytes);
        });
      }
    })();
  }

  @override
  Widget build(BuildContext context) {
    if (_base64 == null)
      return new Container();
    Uint8List bytes = Base64Codec().decode(_base64);
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: 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


6680 Views

Author: RRTutors

Flutter Questions

Android Questions