AnimatedCrossFade with ListView got unbounded height error - dart

Question

here is the code. what I want is showing progress when requesting result, and display the result as a list when requesting completed.
I choose the AnimatedCrossFade cause it had convinient transition animation;
Widget SearchResultPage() {
return AnimatedCrossFade(
firstChild: Center(
child: CircularProgressIndicator(),
),
secondChild: ListView.builder(
itemCount: _searchResult.length,
itemBuilder: (BuildContext context, int index) {
return SearchListItem(_searchResult[index]);
}),
crossFadeState: _searchResult.isEmpty
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: Duration(milliseconds: 500));
}
Widget SearchListItem(BookFuzzySearchDetail detail) {
return Container(
decoration:
BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey))),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 4.0),
leading: Image.network(
detail.cover,
width: 50.0,
height: 50.0,
),
title: Text(
detail.title,
),
),
);
}
and I got the error:
I/flutter ( 6281): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6281): The following assertion was thrown during performResize():
I/flutter ( 6281): Vertical viewport was given unbounded height.
I/flutter ( 6281): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 6281): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 6281): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 6281): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 6281): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 6281): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 6281): the height of the viewport to the sum of the heights of its children.
New to flutter and stucked here for a few days, appreciate for any advice please.

Answer 1

Try adding the property shrinkWrap to your ListView.builder
ListView.builder(
shrinkWrap: true,
itemCount: _searchResult.length,
itemBuilder: (BuildContext context, int index) {
return SearchListItem(_searchResult[index]);
}),

Answer 2

AnimatedCrossFade not only animates the opacity change of both widgets, but also the size transition; since the size of the list is unknown at build time (I mean build lifecycle method, not building the project) without shrinkWrap: true it throws an exception.
As #nickolay-savchenko pointed out in the comment to the accepted answer, shrinkWrap: true may cause significant performance issues and is definitely an unnecessary overkill for this case.
I'd advise using AnimatedSwitcher instead of AnimatedCrossFade, which will only do the opacity change (default behaviour).
Arguably, you don't need to animate the size change between a large possibly screen-overflowing list and "empty search results" widget.
Here is how I used it in one of my projects to animate transition between the list and "loading" widget:
AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: items.isEmpty
? const LoadingWidget()
: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ...
),
),