Migrate Flutter app: realtime db to firestore

Question

I am migrate flutter app from Firebase realtime database to firestore. I have trouble with update this code in chat app because firestore no have FirebaseAnimatedList.

Old code:

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text(“chat“),
    ),
    body: new Container(
        child: new Column(
          children: <Widget>[
            new Flexible(
              child: new FirebaseAnimatedList(
                query: reference,
                sort: (a, b) => b.key.compareTo(a.key),
                padding: new EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (_, DataSnapshot snapshot,
                    Animation<double> animation, int x) {
                  return new ChatMessage(
                      snapshot: snapshot, animation: animation);
                },
              ),
            ),

New code (but give me errors):

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text(“chat"),
    ),
    body: new Container(
        child: new Column(
          children: <Widget>[
            new Flexible(
              child: new StreamBuilder<QuerySnapshot>(
                stream: reference.snapshots(),
                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  return snapshot.hasData? new ListView(
                    physics: const AlwaysScrollableScrollPhysics(),
                    reverse: true,
                    padding: new EdgeInsets.all(8.0),
                    children: snapshot.data.documents.map(DocumentSnapshot snapshot) {
                      return new ChatMessage(
                      snapshot: snapshot,
                      animation: animation,
                      );
                  })
        ),

reference:

final reference = Firestore.instance.collection('messages');

Any help?

I have look up: Firestore StreamBuilder with nested AnimatedList How to bind a Firestore documents list to a Dropdown menu in Flutter? How to listen for document changes in Cloud Firestore using Flutter?

Update:

Thanks everyone for response! I make some changes.

New code:

child: new StreamBuilder<QuerySnapshot>(
                    stream: reference.snapshots(),
                    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (!snapshot.hasData) return new Text('loading...');
                      return new ListView(
                          children: snapshot.data.documents.map((DocumentSnapshot snapshot) {
                      return new ChatMessage(
                      snapshot: snapshot,
                      animation: animation,
                      );
                      }).toList(),
                      );
                    }
                ),
                ),

Now only error is in animation. I have error: undefined name 'animation'

@UpaJah For 'snapshot.data.documents.map(DocumentSnapshot snapshot)'. Error: 'Function expressions can't be named.' — FlutterFirebase

UpaJah UpaJah · Accepted Answer · 2018-11-17T17:04:00

try using ListView.builder ..

  new Flexible(
      child: new StreamBuilder<QuerySnapshot>(
          stream: reference.snapshots(),
          builder: (BuildContext context,
              AsyncSnapshot<QuerySnapshot> snapshot) {
            return ListView.builder(
                itemCount: snapshot.data.documents.length,
                reverse: false,
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return ChatMessage(
                      animation, snapshot.data.documents[index], index);
                });
          }))

Migrate Flutter app: realtime db to firestore

2 Answers