Flutter FireStore

Question

I am using Firebase Cloud Firestore with my Flutter app. Im facing an issue whereby my widgets do not get updated whenever there are changes on the FireStore, it forces me to close the screen and open it again.

Here is my streambuiler:

_layout() {
    return StreamBuilder(
      stream: Firestore.instance
          .collection(Constants.usersNode)
          .document(Constants.dummyUserId)
          .snapshots(),
      builder: (context, snapShot) {
        if (!snapShot.hasData)
          return Center(
            child: CircularProgressIndicator(),
          );
        customer = new Customer.fireStore(snapShot.data);
        // print("here: ${customer.fullName}");
        return new ListView(
          children: _widgets(context, snapShot.data),
        );
      },
    );
  }

And here is my module that adds widgets:

_widgets(BuildContext context, DocumentSnapshot document) {
    widgets.clear();
    print(" >> ${customer.fullName}");
    widgets.add(new Card(
      child: new Column(
        children: <Widget>[
          new Text(
            customer.fullName,
            style: Theme.of(context).textTheme.title,
          ),
          new SizedBox(
            height: 8.0,
          ),
          new Container(
            height: 1.0,
            width: 100.0,
            color: Colors.grey,
          ),
          new SizedBox(
            height: 8.0,
          ),
          new ListTile(
            leading: Icon(
              MyIcons.phone_call_2,
              color: Colors.black,
            ),
            title: new Text(customer.cell),
          ),
          new SizedBox(
            height: 8.0,
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: new Padding(
              padding: const EdgeInsets.all(8.0),
              child: new InkWell(
                onTap: () {
                  print("name: ${customer.fullName}");
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new EditProfileScreen(
                                customer: customer,
                              )));
                },
                child: new Icon(
                  Icons.edit,
                  color: Colors.yellow,
                ),
              ),
            ),
          )
        ],
      ),
    ));       

    return widgets;
  }

However, the console prints out updates in realtime, but the widgets still show old data. What am I doing wrong? Am I suppose to call setState() everytime a change is detected but from documentation, Streambuilder seems to take care of that.

Answer 1

The instance variable widgets doesn't seem to have a use and is likely to cause problems. Just make a new List each time.

_widgets(BuildContext context, DocumentSnapshot document) {
  List<Widget> widgets = [];
  print(" >> ${customer.fullName}");