How to convert BASE64 string into Image with Flutter?

Question

I'm converting images saved in my Firebase database to Base64 and would like to decode and encode. I've researched similar questions, but am still getting errors. Here is what I have so far?

var image1 = String;

var pic = event.snapshot.value['image'];
var photo = BASE64.decode(pic);
image1 = photo;

I'm getting the following error...

A value of type "List<int>" cannot be assigned to a variable of type "Type"

If you could please provide a reverse process for encoding an image into Base64 so they may be saved back to Firebase, that would be appreciated.

*** UPDATE

Here is my updated code that's still throwing an error.

image1 = event.snapshot.value['image'];
var image = BASE64.decode(image1.toString());
new Image.memory(image),

The error is...

FormatException: Invalid Length must be a multiple of 4

Answer 1

There's a simpler way using 'dart:convert' package

Image.memory(base64Decode(base64String));

Implementation and some useful methods :

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/widgets.dart';


Image imageFromBase64String(String base64String) {
  return Image.memory(base64Decode(base64String));
}

Uint8List dataFromBase64String(String base64String) {
  return base64Decode(base64String);
}

String base64String(Uint8List data) {
  return base64Encode(data);
}

Answer 2

You can convert a Uint8List to a Flutter Image widget using the Image.memory constructor. (Use the Uint8List.fromList constructor to convert a List to Uint8List if necessary.) You can use BASE64.encode to go the other way.

Here's some sample code.

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

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

class MyHomePageState extends State<MyHomePage> {
  String _base64;

  @override
  void initState() {
    super.initState();
    (() async {
      http.Response response = await http.get(
        'https://flutter.io/images/flutter-mark-square-100.png',
      );
      if (mounted) {
        setState(() {
          _base64 = BASE64.encode(response.bodyBytes);
        });
      }
    })();
  }

  @override
  Widget build(BuildContext context) {
    if (_base64 == null)
      return new Container();
    Uint8List bytes = BASE64.decode(_base64);
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new ListTile(
        leading: new Image.memory(bytes),
        title: new Text(_base64),
      ),
    );
  }
}

However, it's generally a bad idea to store large blobs of binary data in your database. It's not playing to the strengths of Firebase realtime database and you will end up wasting bandwidth transmitting data you don't need as well as unnecessary encoding and decoding. You should use the firebase_storage plugin instead, storing the path or download URL of the image in the database.

Answer 3

Uint8List _bytesImage;

String _imgString = 'iVBORw0KGgoAAAANSUhEUg.....';

_bytesImage = Base64Decoder().convert(_imgString);

Image.memory(_bytesImage)

Answer 4

To open a camera photo (temporary folder), editing a file and then turning it into Base64:

Code:

import 'dart:convert';
import 'package:image/image.dart' as ImageProcess;

File file = File(imagePath);
final _imageFile = ImageProcess.decodeImage(
  file.readAsBytesSync(),
);

...edit file...

String base64Image = base64Encode(ImageProcess.encodePng(_imageFile));

Decode and show:

import 'dart:convert';
import 'package:image/image.dart' as ImageProcess;

final _byteImage = Base64Decoder().convert(base64Image);
Widget image = Image.memory(_byteImage)

Answer 5

import

import 'dart:convert';
import 'dart:typed_data';

from screen load the data and assign to this variable

    Uint8List _bytes;
  _bytes = Base64Decoder().convert("iVBORw0KGgoAAAANSUhEUgAAANgAAA......");

In code tree structure widget

Image.memory(_bytes)

Answer 6

With this simple method i could set an image in flutter. The image attribute is the base64 image as string, example:

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb2

Try the next:

Widget getImagenBase64(String imagen) {
    _imageBase64 = imagen;
    const Base64Codec base64 = Base64Codec();
    if (_imageBase64 == null) return new Container();
    bytes = base64.decode(_imageBase64);
    return Image.memory(
          bytes,
          width: 200,
          fit: BoxFit.fitWidth,
       
    );
  }

I hope this work for you. Happy coding.

Answer 7

this worked for me

ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.memory(
                  base64Decode(widget.imgBase64 ?? ''),
                  gaplessPlayback: true,
                  fit: BoxFit.cover,
                )),

Answer 8

Do check the type using runtimeType, In my case it was String. My function was returning Future<<U'intList>> i changed it to Future<<s'tring>> and used Image.Memory like this: Image.memory(base64Decode(_imageBytes!)

Here is my full code:

import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';

import 'getResponseFromNodeApi.dart';
import 'getResponseFromStabilityAi.dart';

class MyImageWidget extends StatefulWidget {
  const MyImageWidget({Key? key}) : super(key: key);

  @override
  _MyImageWidgetState createState() => _MyImageWidgetState();
}

class _MyImageWidgetState extends State<MyImageWidget> {
  String? _imageBytes;
  String? _errorMessage;

  @override
  void initState() {
    super.initState();

    _generateImage();
  }

  Future<void> _generateImage() async {
    setState(() {
      _imageBytes = null;
      _errorMessage = null;
    });

    try {
      // final bytes = await getResponseFromStabilityAi();
      final bytes = await getResponseFromNodeApi(textPrompt: 'light House');
      // List<int> bytes2 = utf8.encode(bytes as String);
      setState(() {
        _imageBytes = bytes;
      });
    } catch (e) {
      setState(() {
        print(e);
        _errorMessage = 'Failed to generate image: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Generated Image'),
      ),
      body: Center(
        child: _imageBytes != null
            ? Image.memory(base64Decode(_imageBytes!))
            : _errorMessage != null
            ? Text(_errorMessage!)
            : const CircularProgressIndicator(),
      ),
    );
  }
}

I hope this helps

Answer 9

Supposing we have a DataURL stored in a String of a format similar to the following:

String dataUrl = "data:image/jpeg;base64,/9j/4AAQSk...";

A simple solution exists to render this as an Image via Uri:

Image.memory(
    Uri.parse(dataUrl).data?.contentAsBytes()
    ?? Uint8List(0),
)

This is a null-safe solution, and can be easily modified into the following for older versions of Dart:

Image.memory(Uri.parse(dataUrl).data.contentAsBytes())