node.jsflutterlistviewbase64uint8list

DECODE BASE64STRING TO IMAGE IN FLUTTER


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?


Solution

  • 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']),
                  );
                }),
          ),
        );
      }
    }