I'm trying to get AnimatedList
working with my current MessengerBloc
which can accept MessengerEvent.pushed(Message)
and MessengerBloc.popped(Message)
. When the state changes, it listens and compares the previous state with the current state to figure out which item index has to be added/removed/moved. Up to this point works so I removed those code for brevity.
Problem
When I add MessengerEvent.pushed(Message)
this is the sequence of print statements:
message was added
building messages
[Message()]
// from print(messages)
in _buildOverlay()
index0: []
// from print('index$index: $messages')
in AnimatedList.itemBuilder
index0: [Message()]
// from print('index$index: $messages')
in AnimatedList.itemBuilder
Question: Why is messages
in AnimatedList.itemBuilder
prints out emptyList
, then runs again with the updated messages
?
class MessageOverlay extends StatelessWidget {
final GlobalKey<AnimatedListState> _animatedListKey = GlobalKey();
Widget _buildOverlay(KtList<Message> messages) {
print('building messages');
print(messages);
return AnimatedList(
key: _animatedListKey,
initialItemCount: messages.size,
itemBuilder: (context, index, animation) {
print('index$index: $messages');
return const SizedBox.shrink();
},
);
}
@override
Widget build(BuildContext context) {
return BlocConsumer<MessengerBloc, MessengerState>(
listener: (context, state) {
// Message moved - Removed code for brevity
if (messageMoved) {
print('message was moved');
_animatedListKey.currentState
.removeItem(prevIndex, (context, animation) => null);
_animatedListKey.currentState.insertItem(nextIndex);
}
// Message added - Removed code for brevity
else if (messageAdded) {
print('message was added');
_animatedListKey.currentState.insertItem(nextIndex);
}
// Message removed - Removed code for brevity
else if (messageRemoved) {
print('message was removed');
_animatedListKey.currentState
.removeItem(prevIndex, (context, animation) => null);
}
},
builder: (context, state) => _buildOverlay(state.messages),
),
);
}