If I have several parts in a page that need to use AnimatedList, what should I do?

[zxiaohong]

Thanks for your sharing, I have benefited a lot from it.If I have several parts in a page that need to use AnimatedList, what should I do?

  Widget singleRoomDevides(room, signal) {
    final GlobalKey<AnimatedListState> _listKey = GlobalKey();
    return Container(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
          child: Text(room['room_name'],
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(26, false),
                  color: Color(0xff7D80A2))),
        ),
        Flexible(
          child: SafeArea(
            child: AnimatedList(
              key: _listKey,
              initialItemCount: room['devices'].length,
              itemBuilder:
                  (BuildContext context, int index, Animation animation) {
                return ScaleTransition(
                  scale: animation,
                  child: _singleDeviceCard(
                      room['room_id'], room['devices'][index], signal),
                );
              },
            ),
          ),
        )
      ],
    ));
  }

just like the above code show,I have several singleRoomDevides widget in my page, the _singleDeviceCard widget is a normal widget。

I get the following error:

flutter: Another exception was thrown: Vertical viewport was given unbounded height.
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#b6ace NEEDS-LAYOUT NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#b6ace NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#66c76 relayoutBoundary=up13 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#c86fc relayoutBoundary=up12 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#e71b4 relayoutBoundary=up11 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#3bf80 relayoutBoundary=up10 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#aa75d relayoutBoundary=up9 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#3f9c7 relayoutBoundary=up8 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#e50a7 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#12023 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#42612 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#9ee0a NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#6a464 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#b6ace NEEDS-PAINT

Do you know how to fix it? Thank you.

[zxiaohong]

Oh， I find the solution with shrinkWrap property。

child: AnimatedList(
         shrinkWrap: true,
          initialItemCount: room['devices'].length,
          itemBuilder: (BuildContext context, int index, Animation animation){
               return ScaleTransition(
                    scale: animation,
                     child: _singleDeviceCard(room['room_id'], room['devices'][index], signal),
                  );
            },
    )