Stream Builder causing infinite loop flutter - image

Question

I have stored data on firestore, but when I retrieve it.
It causes infinite loop. The number of items in my list keeps on increasing.
class PotHolesList extends StatelessWidget {
#override
Widget build(BuildContext context) {
final potholesData = Provider.of<PotHoles>(context);
Future<File> _createFileFromString(String encodedStr) async {
Uint8List bytes = base64Decode(encodedStr);
String dir = (await getApplicationDocumentsDirectory()).path;
File file = File(
"$dir/" + DateTime.now().millisecondsSinceEpoch.toString() + ".png");
await file.writeAsBytes(bytes);
return file;
}
return StreamBuilder(
stream: _firestore.collection('potholes').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {...}
final potholes = snapshot.data.docs;
for (var pt in potholes) {
final id = pt['id'];
final address = pt['address'];
final latitude = pt['latitude'];
final longitude = pt['longitude'];
var image;
var P;
_createFileFromString(pt['image']).then((value) {
image = value;
P = PotHole(
id: id,
currentPosition: Position.fromMap(
{'latitude': latitude, 'longitude': longitude}),
address: address,
image: image,
);
potholesData.addPothole(P);
});
print(potholesData.items.length);
}
return ListView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: potholesData.items.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: potholesData.items[i],
child: PotHoleItem(),
),
);
},
);
}
}
I have tried converting the image base64 string from firestore to a file type in flutter, since it is a future, I have to wait, then do the rest of the adding.
This is the updated code, but it still gives infinite loop, the list items length keeps on increasing indefinitely.
class PotHolesList extends StatelessWidget {
final _stream = _firestore.collection('potholes').snapshots();
Future<File> _createFileFromString(String encodedStr) async {
Uint8List bytes = base64Decode(encodedStr);
String dir = (await getApplicationDocumentsDirectory()).path;
File file = File(
"$dir/" + DateTime.now().millisecondsSinceEpoch.toString() + ".png");
await file.writeAsBytes(bytes);
return file;
}
#override
Widget build(BuildContext context) {
final potholesData = Provider.of<PotHoles>(context);
return StreamBuilder(
stream: _stream,
// ignore: missing_return
builder: (context, snapshot) {
if (!snapshot.hasData) {...}
final potholes = snapshot.data.docs;
for (var pt in potholes) {
final id = pt['id'];
final address = pt['address'];
final latitude = pt['latitude'];
final longitude = pt['longitude'];
var image;
var P;
_createFileFromString(pt['image']).then((value) {
image = value;
P = PotHole(
id: id,
currentPosition: Position.fromMap(
{'latitude': latitude, 'longitude': longitude}),
address: address,
image: image,
);
potholesData.addPothole(P);
});
print(potholesData.items.length);
}
return ListView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: potholesData.items.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: potholesData.items[i],
child: PotHoleItem(),
),
);
},
);
}
}
This is what PotHoleItem code is:
class PotHoleItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
final pothole = Provider.of<PotHole>(context, listen: false);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xFFd8e2dc),
borderRadius: BorderRadius.circular(15.0)),
child: ListTile(
trailing: Icon(pothole.isFixed ? Icons.check : Icons.clear),
title: Row(
// mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 5.0),
// height: double.infinity,
alignment: Alignment.center,
child: Image.file(
pothole.Image,
fit: BoxFit.contain,
width: 65,
height: 65,
),
),
SizedBox(
width: 10.0,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"LAT: ${pothole.Latitude}, LONG: ${pothole.Longitude}",
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 10.0),
SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
child: Text(
"${pothole.Address}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.normal),
),
),
],
),
),
],
),
onTap: () {
Navigator.of(context)
.pushNamed(PotHoleDetailScreen.routeName, arguments: pothole);
},
),
),
);
}
}
Infinite list
List size should be 1

Answer 1

You are creating the future in the call to FutureBuilder for the future: parameter. Don't do that. The docs for FutureBuilder say:
The future must have been obtained earlier, e.g. during State.initState, State.didUpdateWidget, or State.didChangeDependencies. It must not be created during the State.build or StatelessWidget.build method call when constructing the FutureBuilder. If the future is created at the same time as the FutureBuilder, then every time the FutureBuilder's parent is rebuilt, the asynchronous task will be restarted.
A general guideline is to assume that every build method could get called every frame, and to treat omitted calls as an optimization.
I have a nice 10-minute screencast that illustrates this point: https://www.youtube.com/watch?v=sqE-J8YJnpg.