flutter Read stream after bloc call inside for loop - flutter

Question

** UPDATE THE QUESTION **
Now all work correctly !
I make my first backend that return to me all images in base64 string format inside a json format like that :
[
{
"base64Img":"/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAAqACAAQAAAABAAAAyKADAAQAAAABAAAAlgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAA....."
}]
I take this pointing to this path : 192.168.1.20:8888/myserver/immagini/onserver/mydevicename/{name of the img}
On my pc where backend run i have several images and i want to return all of this.
Now in flutter i create a bloc :
class ImmagineBloc {
Repository _repository = Repository();
Observable <List<ImmagineCompleta>> get immagini => _immagini.stream;
** UPDATE WORKING MODE **
getImmagini(String deviceName, String immagineName) async {
List<ImmagineCompleta> Immagini = await _repository.getImmagini(deviceName, immagineName);
return Immagini;
}
I want to read the stream of every request, create the image from base 64 string ( try with one request of one image and it work, image display correctly), so create this image and put inside the list of widget for make it visible inside a grid :
** UPDATE WORKING MODE **
#override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: nameOnServer.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return FutureBuilder(
future: _immagineBloc.getImmagini(
_deviceName, nameOnServer[index]),
builder: (context, snapshotData) {
return Container(
height: 200,
width: 200,
child: Image.memory(
base64Decode(snapshotData.data[0].base64img),
fit: BoxFit.cover,
));
});
}
);
}
}
How can i do that ? Read every stream before do another request and save image create from base 64 string inside a list of widget .
Inside _mediaList i wanna store all the images create from base64 conversion.

Answer 1

My code might not perfect, but I think this is what you want to achieve.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example"),
automaticallyImplyLeading: false,
),
body: GridView.builder(
itemCount: nameOnServer.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return FutureBuilder(
future: _immagineBloc.getImmagini(
_deviceName, nameOnServer[index]),
builder: (context, snapshotData) {
return Container(
height: 200,
width: 200,
child: Image.memory(
base64Decode(snapshotData.data[0].base64img),
fit: BoxFit.cover,
));
});
}));
}
Edit
The correct answer as below:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Example"),
automaticallyImplyLeading: false,
),
body: GridView.builder(
itemCount: nameOnServer.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return FutureBuilder(
future: _immagineBloc.getImmagini(
_deviceName, nameOnServer[index]),
builder: (context, snapshotData) {
return Container(
height: 200,
width: 200,
child: Image.memory(
base64Decode(snapshotData.data[0].base64img),
fit: BoxFit.cover,
));
});
}));
}

Answer 2

You may use single StreamBuilder which listen the stream Stream<<List<Uint8List>> which is accumulated in bloc. Below scratch code.
bloc.dart
class Bloc {
final imageController =
StreamController<List<Uint8List>>.broadcast();
Stream<List<Uint8List>> get images => imageController.stream;
// Here you get your all images in loop
void getImages() async {
final imageList = <Uint8List>[];
for (int i = 0; i < nameOnServer.length; i++) {
final imageBase64 = await getImage(...);
final imageDecoded = base64decode(imageBase64);
// Decode image and accumulate in list
imageList.add(imageDecoded);
// which sent to sink
imageController.add(imageList);
}
}
widget.dart
final bloc = Bloc();
#override
void iniState() {
super.initState();
bloc.getImages();
}
#override
Widget build(BuildContext context) {
// Build `GridView` basis on stream.
// As list contains all images so they will displayed
// one by one
return StreamBuilder<List<Uint8List>>(
stream: bloc.images;
builder: (context, snapshot) {
// check error
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
final images = snapshot.data;
return GridView.builder(
itemCount: images.length,
itemBuilder: (_, index) {
return ImageMemory(images[index]);
}
);
},
);
}