Firebase Flutter StreamBuilder when dismiss the list from listview the Screen is lagging a bit

Viewed 59

The link is my situation in .mp4 for 3 secs the lagging screen. I found my screen shows some lagging situation after I dismiss the listview and update the doc.

This is my dismissible widget.

Dismissible(
                          direction: DismissDirection.endToStart,
                          background: Container(
                            color: Colors.red,
                          ),
                          onDismissed: (DismissDirection direction) {
                            setState(
                              () {
                                healthGoal.removeAt(index);
                                healthgoalCollection
                                    .doc("c66ae3ef-9853-4")
                                    .update(
                                  {
                                    "healthGoalList": healthGoal,
                                  },
                                );
                              },
                            );
                          },

Here is my stream builder widget that I get the data from

StreamBuilder<DocumentSnapshot>(
      stream: _healthGoalStream,
      builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (!snapshot.hasData) {
          return const Text("No data");
        }
        if (snapshot.hasError) {
          return const Center(child: Text('Something went wrong'));
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
            child: CircularProgressIndicator(
              color: Colors.red,
            ),
          );
        }

        if (snapshot.connectionState == ConnectionState.active) {
          Map<String, dynamic> condition =
              snapshot.data?.data() as Map<String, dynamic>;

          Map<String, dynamic> conditionmap =
              Map<String, dynamic>.from(condition);
          healthGoal.clear();
          conditionmap.forEach(
            (key, value) {
              if (key == "healthGoalList") {
                healthGoal = value;
              }
              if (key == "nameUpdated") {
                if (value != "") {
                  nameupdate = value;
                }
              }
              if (key == "agreeToGoal") {
                if (value != "") {
                  agreeToGoal = value;
                }
              }

              if (key == "dateTimeUpdated") {
                if (value != "") {
                  timeget = DateTime.fromMillisecondsSinceEpoch(value);
                  timeupdate = f.format(timeget);
                }
              }
            },
          );

Are there any ways that can prevent this kind of lagging situation? Thanks if you can help or even give me a direction on the cause.

This is my cloud firestore data looks like

This is my cloud firestore data looks like

1 Answers

2 Things that I can note from your code.

  1. Calling set state is unnecessary because u are using StreamBuilder to listen to changes on firebase in real time. The builder method will be called again if there are any incoming changes. to read more about real time with firebase firestore https://firebase.flutter.dev/docs/firestore/usage/#realtime-changes

  2. Using keys to prevent widget rebuilds. more on that here https://api.flutter.dev/flutter/foundation/Key-class.html.

    Dismissible(key: ValueKey(healthGoal[index]) );

Related