[SOLVED]: Invalid character (at character 5) data:image/png;base64, iVBORw0KGgo…

While you are working with flutter conversions, especially with images, sometimes you might get an error when you parse a base64 data: Invalid character (at character 5)

Invalid character (at character 5) data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAgAElEQ… ^

That’s mean that you probably getting this image from database, and trying to convert to base64. unfortunately, dart cannot convert this type of string.

Solution

If you want to decode a normal base64, try to convert data: string with Uri first.

// Image example. Put your data string
String base64Image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAgAElEQ...."; 

// Convert to UriData 
final UriData data = Uri.parse(base64Image).data;

// You can check if data is normal base64 - should return true
print(data.isBase64); 

// Will returns your image as Uint8List
Uint8List myImage = data.contentAsBytes()

(Optional) How to display image with Uint8List

If you want to display an image with earlier converted Uint8List from base64, you can do that using: Image.memory()

....

// Will returns your image as Uint8List
Uint8List myImage = data.contentAsBytes()

CircleAvatar(
      radius: 30,
      child: ClipOval(
        child: Image.memory(myImage),
      ),
    );