FirebaseAnimatedList itemBuilder Error

Question

I'm currently going through the Flutter Firebase codelab here.

I've followed all the steps, but I'm getting two errors when trying to use the itemBuilder of the FirebaseAnimatedList widget.

Error 1

Relates to sort: (a, b) => b.key.compareTo(a.key):

The function expression type '(dynamic, dynamic) → dynamic' isn't of type '(DataSnapshot, DataSnapshot) → int'. This means its parameter or return type does not match what is expected. Consider changing parameter type(s) or the returned type(s).

Do I need to cast the (a,b) to DataSnapshot?

Error 2

Relates to the itemBuilder of the FirebaseAnimatedList.

The argument type '(BuildContext, DataSnapshot, Animation, int) → dynamic' can't be assigned to the parameter type '(BuildContext, DataSnapshot, Animation) → Widget'.

In this case, it seems that the index needs to be passed in, and also that the ChatMessage is returning the wrong type. I'm unsure how to fix these issues though.

Below is the code I have.

build function of the ChatScreenState class

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('friendlychat'),
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              child: FirebaseAnimatedList(
                query: reference,
                sort: (a, b) => b.key.compareTo(a.key),
                padding: EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation, int index) {
                  return ChatMessage(snapshot: snapshot, animation: animation);
                },
              ),
            ),
            Divider(height: 1.0),
            Container(
              decoration: BoxDecoration(color: Theme.of(context).cardColor),
              child: _buildTextComposer(),
            )
          ],
        ));
  }

ChatMessage class

class ChatMessage extends StatelessWidget {
  ChatMessage({this.snapshot, this.animation});
  final DataSnapshot snapshot;
  final Animation animation;

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
        sizeFactor: CurvedAnimation(parent: animation, curve: Curves.easeOut),
        axisAlignment: 0.0,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(right: 16.0),
                child: CircleAvatar(
                    backgroundImage:
                        NetworkImage(snapshot.value['senderPhotoUrl'])),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(snapshot.value['senderName'],
                        style: Theme.of(context).textTheme.subhead),
                    Container(
                      margin: EdgeInsets.only(top: 5.0),
                      child: Text(snapshot.value['text']),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

updated code for FirebaseAnimatedList:

FirebaseAnimatedList(
                query: reference,
                sort: (DataSnapshot a, DataSnapshot b) =>
                    b.key.compareTo(a.key),
                padding: EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation) {
                  return ChatMessage(snapshot: snapshot, animation: animation);
                },
              ),

Answer 1

This is because flutter beta is using Dart-2 which by default ensures type safety max.

To resolve error 1: Change

(a, b) => b.key.compareTo(a.key)

To

(Datasnapshot a, Datasnapshot b) => b.key.compareTo(a.key)

To resolve error 2: Change

Remove the int index from the itemBuilder function

and also add new keyword after return in itemBuilder function.

Hope that helps!

Answer 2

itemBuilder has an extra parameter called index.

typedef Widget FirebaseAnimatedListItemBuilder( BuildContext context, DataSnapshot snapshot, Animation animation, int index, );

So just add ", _" after Animation, that would fix it.