How to show a base64 image

Question

This is the method to get all photos from local db

getAllPhotos() async {
  final dbClient = await db;
  List<Map> maps = await dbClient!.query(TABLE, columns: [ID, NAME]);
  List<Photo> employees = [];
  if (maps.length > 0) {
    for (int i = 0; i < maps.length; i++) {
      employees.add(Photo.fromMap(maps[i]));
    }
  }

  return employees.toList();
}

I am trying to show the single image when clicked but nothing is showing up. Here is the method that returns the single image is there any alternative to this

kj(int i ){
  return Scaffold(
    appBar: AppBar(
      title: Text("ok"),
    ),
    body: PhotoView(
      imageProvider: images!.map((photo) {
        return Utility.imageFromBase64String(photo.photo_name);
      }).toList()[i].image
      ),
    );
}

Below is the gridview builder

return GridView.builder(
    itemCount:images!.map((photo) {
      return Utility.imageFromBase64String(photo.photo_name);
    }).toList().length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2), itemBuilder: (BuildContext context, int index) {
  return GestureDetector(
      onTap: () {
        return kj(index);
      },
      child: images!.map((photo) {
        return Utility.imageFromBase64String(photo.photo_name);
      }).toList()[index]
      );

});

I want to show the image when user click on the particular image when I run this code nothing is showing up

Answer 1

you can show image using following line:

Image.memory(base64Decode(base64String));