I have base64Binary image format, how to display it in flutter

KamranKhan
May 20, 2024
218 views
1 vote
2 Answers

I recived secured image from api which is basically Base64Binary and it doesn’t decode with only base64 conversion. it shows format exception. I am looking for solution in flutter. my format is

"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"

I tried only base64 conversion and it doesn’t work for me it shows format exception. My format is right. I want to convert this type of format to jpg or image and display it in flutter

Answers

You can use the Image.memory widget along with the dart:convert library to decode the base64 string into bytes

class Base64ImageWidget extends StatelessWidget {
  final String base64String;

  const Base64ImageWidget({Key? key, required this.base64String}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Decode the base64 string into bytes
    Uint8List bytes = base64.decode(base64String);

    return Image.memory(
      bytes,
      fit: BoxFit.cover, // Adjust the fit according to your requirement
    );
  }
}

Then use like this:

Base64ImageWidget(
  base64String: 'your base64 image string',
)

you can receive a Base64 encoded image from an API and it fails to decode correctly, there could be several reasons why you’re getting a format exception.

Check the Base64 String Format: Ensure that the Base64 string is properly formatted. Sometimes the string might contain extra characters like new lines or spaces that need to be trimmed.
Add Image Prefix (if missing): Base64 images often come with a prefix that indicates the type of image (e.g., data:image/jpeg;base64,). If your string lacks this prefix, you might need to add it manually.

Here’s a step-by-step solution to handle and display the Base64 image

Step 1: Ensure Proper Base64 String
Make sure the Base64 string is valid and properly formatted. If it has a prefix, you should include it. For example:

String base64String = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/…";

If your string is without the prefix, add it manually:

String base64String = "image64";
base64String = "data:image/jpeg;base64,$base64String";

Step 2: Decode and Display Image
Here’s how you can decode the Base64 string and display it as an image in your Flutter app:

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Base64 Image Display'),
        ),
        body: Center(
          child: Base64ImageWidget(base64String: "your_base64_string_here"),
        ),
      ),
    );   } }

class Base64ImageWidget extends StatelessWidget {   final String base64String;

  Base64ImageWidget({required this.base64String});

  @override   Widget build(BuildContext context) {
    // Ensure the base64 string is well-formatted
    String base64ImageString = base64String;

    // Decode the Base64 string to bytes
    Uint8List bytes = base64Decode(base64ImageString);

    // Display the image
    return Image.memory(bytes);  
 } 
}

Step 3: Error Handling
To handle errors and ensure the Base64 string is valid, you can add some error handling:

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Base64 Image Display'),
        ),
        body: Center(
          child: Base64ImageWidget(base64String: "your_base64_string_here"),
        ),
      ),
    );
  }
}

class Base64ImageWidget extends StatelessWidget {
  final String base64String;

  Base64ImageWidget({required this.base64String});

  @override
  Widget build(BuildContext context) {
    try {
      // Ensure the base64 string is well-formatted
      String base64ImageString = base64String;

      // Decode the Base64 string to bytes
      Uint8List bytes = base64Decode(base64ImageString);

      // Display the image
      return Image.memory(bytes);
    } catch (e) {
      // Handle the exception and show an error message or placeholder
      return Text('Error decoding image: $e');
    }
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.