DECODE BASE64STRING TO IMAGE IN FLUTTER

Question

this my code to display image

body: ListView.builder(
      itemCount: jsonList == null ? 0 : jsonList.length,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading:Image(image: MemoryImage(base64Decode(base64String))),
          trailing: Text(jsonList[index]['pname']
            ,
            style: TextStyle(color: Colors.brown, fontSize: 15),
          ),
          title: Text(jsonList[index]['pdesc']),
        );
      }),

but end up with this error I/flutter (15439): FormatException: Invalid length, must be multiple of four (at character 256) I/flutter (15439): ...2vt6b997q855/zhVdW9337r3dgewn+fll6e607fqVJ3z/Z3z209deIfeof+fSfytO1CEBCfeR+0 I/flutter (15439):

anybody please help me?

Answer 1

The base64String is wrong, try another and it should work for you. I'll send you an example.

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final List jsonList = [
      {"pname": "test", "pdesc": "example"}
    ];

    //String base64String =
    //    "iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABHNCSVQICAgIfAhkiAAAIABJREFUeJztnXmYHVWd9z/nVN2lt3R30p3urIQkhCSQEMISdjCIEEZREYbNDcdxXubl9cGRxdFBZdwQlRl1RHnAEXVEUV9FUXYxISQhZCH7TrbO2vt6b997q855/zhVdW9337r3dgewn+fll6e607fqVJ3z/Z3z209deIfeof+fSfytO1CEBCfeR+0";
    String base64String =
        "iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAYAAAC9pNwMAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAVGh1IDIwIEp1bCAyMDIzIDExOjIxOjMyIEFNIEVEVMnR7tEAAAFMSURBVEiJ7dYhbINAGIbhF9IE3HBD1rVuuMnVtXOVSOS54VaJnETiipxkjrlKUGOuddQxVXC4m1jFko62WSHNsn7qcvfnnuTy3+UUKaXkDFHPgf5TuD6iqHieYio6k7BsDz64VR7iiBc+WiO38P7lJYHj8lq1rAKq0bhUkz05eLXDw53WPqw3sZmH8HW8cIbVVHQK/LOaMHNCjKcQMexABXq7UyUL1yHq+yROH2ivk/fCZezixBZ+YmN2Qn5Fzb5f5CJCiIRREDDtUgVULyq2w5xQCLJJgD9p7vXW4EWcUQN5IJjlNqE/onsWFG08l0Vk4pr3RMYNQ3O3i8tlyqqCq8EtQwMMOyB2rZPgHrqOTk1ZQ7V+J103F1erlBS4tlro9MHjm9yfjZyPNQmaHM83B2qPjzq1Tzuy30b1zuM2v9VdR7l89i7wBf7z8CcwmdC0wpEALQAAAABJRU5ErkJggg==";
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: ListView.builder(
            itemCount: jsonList.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                leading: Image(image: MemoryImage(base64Decode(base64String))),
                trailing: Text(
                  jsonList[index]['pname'],
                  style: const TextStyle(color: Colors.brown, fontSize: 15),
                ),
                title: Text(jsonList[index]['pdesc']),
              );
            }),
      ),
    );
  }
}