How to fix recursing HTTP request in FutureBuilder? - flutter

Question

I'm creating an app that has a list inside a screen. What I want to do is whenever the app makes the HTTP request (getting the data), I want to show CircularProgressIndicator() on the screen. I tried to use a FutureBuilder to implement this, but the app recursively/continuously loading the data (when the ListView is set, the app load the data again and again). Here are some of my code:
FutureBuilder Widget
Widget _buildFuture(BuildContext context){
return FutureBuilder(
future: listenForBeers(),
builder: (context, snapshot) {
if(snapshot.connectionState == ConnectionState.done){
if(snapshot.hasError){
print('_buildFuture: Loading error');
return Center(
child: Text(
snapshot.error.toString(),
textAlign: TextAlign.center,
textScaleFactor: 1.3,
),
);
}
print('_buildFuture: Showing the Data');
return _buildBeers();
}
else{
print('_buildFuture: Loading the data');
return Center(
child: Column(
children: <Widget>[
SizedBox(height: 100),
CircularProgressIndicator()
],
),
);
}
}
);
}
initState() and listenForBeers() method
#override
void initState(){
super.initState();
listenForBeers();
}
Future listenForBeers() async {
final Stream<Beer> stream = await getBeers();
stream.listen((Beer beer) => setState(() => _beers.add(beer)));
}
getBeers() method
Future<Stream<Beer>> getBeers() async {
final String url = 'https://api.punkapi.com/v2/beers';
final client = new http.Client();
final streamedRest = await client.send(http.Request('get', Uri.parse(url)));
return streamedRest.stream
.transform(utf8.decoder)
.transform(json.decoder)
.expand((data) => (data as List))
.map((data) => Beer.fromJSON(data));
}
I'm not sure how to implement the right way because I'm new to Flutter as well. If you need other code feel free to ask, and any help would be appreciated. Thanks!

Answer 1

CReate AsyncMemoizer in State Class
AsyncMemoizer _memoizer = AsyncMemoizer();
Now Change
Future listenForBeers() async {
return this._memoizer.runOnce(() async {
final Stream<Beer> stream = await getBeers();
stream.listen((Beer beer) => setState(() => _beers.add(beer)));
)};
}
Future refreshBeers() async {
_memoizer = AsyncMemoizer();
return listenForBeers();
}
Details at https://medium.com/saugo360/flutter-my-futurebuilder-keeps-firing-6e774830bc2

Answer 2

Initialize stream in initstate and keep referance like this.
Stream<Beer> stream;
#override
void initState(){
super.initState();
stream = await getBeers();
stream.listen((Beer beer) => setState(() => _beers.add(beer)));
}