How to Render data from Request inside a FutureBuilder - dart

Question

I'm trying to list pokemons from my api, its works when i call the list but when i try to get the data for each pokemon it doesn't render the data.
updated the code for the #Gazihan Alankus answer.
Widget build(BuildContext context) {
return FutureBuilder<PokeData>(
future: api.getPokemonList(),
builder: (
BuildContext context,
AsyncSnapshot<PokeData> pokedata
) {
if(pokedata.hasData && pokedata.connectionState == ConnectionState.done) {
return Container(
child: ListView(
children: pokedata.data.results.map((pokemon) {
FutureBuilder(
future: api.getPokeDetail(pokemon.url),
builder: (
BuildContext context,
AsyncSnapshot snapshot
) {
print('------------widget------------');
if(snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
return Container(child: PokemonWidget(
pokemon.name,
snapshot.data.sprites.normal,
snapshot.data.types
),);
} else {
return Container(
child: CircularProgressIndicator(),
);
}
}
);
}).toList(),
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
);
}
But now i am getting this error when the app is running, the first request works well but it never call the second request.
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: 'package:flutter/src/widgets/sliver.dart': Failed assertion: line 553 pos 12: 'child != null': is
flutter: not true.
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter: https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: (elided 5 frames from class _AssertionError and package dart:async)
flutter:
flutter: The following RenderObject was being processed when the exception was fired:
flutter: RenderSliverList#04cee relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
flutter: creator: SliverList ← MediaQuery ← SliverPadding ← Viewport ← IgnorePointer-[GlobalKey#b48da] ←
flutter: Semantics ← Listener ← _GestureSemantics ←
flutter: RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#865eb] ← _ScrollableScope ←
flutter: _ScrollSemantics-[GlobalKey#8f9cb] ← Scrollable ← ⋯
flutter: parentData: paintOffset=Offset(0.0, 0.0) (can use size)
flutter: constraints: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.idle,
flutter: scrollOffset: 0.0, remainingPaintExtent: 603.0, crossAxisExtent: 375.0, crossAxisDirection:
flutter: AxisDirection.right, viewportMainAxisExtent: 667.0, remainingCacheExtent: 853.0 cacheOrigin: 0.0 )
flutter: geometry: null
flutter: no children current live
flutter: This RenderObject has no descendants.
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.
flutter: Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.

Answer 1

One way is to create a FutureBuilder per item, like so:
Widget build(BuildContext context) {
return FutureBuilder<PokeData>(
future: api.getPokemonList(),
builder: (
BuildContext context,
AsyncSnapshot<PokeData> snapshot
) {
if(snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
return Container(
child: ListView(
children: snapshot.data.results.map((pokemon) {
FutureBuilder(
future: api.getPokeDetail(pokemon.url),
builder: (
BuildContext context,
AsyncSnapshot snapshot
) {
if(snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
return PokemonWidget(
pokemon.name,
resp.sprites.normal,
resp.types
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}
)
}).toList(),
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
);
}