0
votes

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.

1
What's the purpose of the widgets List? Try creating a new List each time. - Richard Heap
the list widget is to allow users to scroll if the widgets grow to a larger size, I didn't use a ListView.buider because the widgets are different - spongyboss
My question was why you are keeping the List between builds. Make a new List each build. - Richard Heap
ooh, lol, that worked... wow, Thanks man, you can post it as an answer and I will accept it - spongyboss

1 Answers

2
votes

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}");