Flutter firebase Streambuilder，更新一个文档时重建整个屏幕

Question

I am working on something similar to an Instagram feed page. The current implementation for that is: There is a Streambuilder in the feed screen, subscribed to the posts collection in firebase firestore. So whenever there is a new post in the firestore posts collection, it will show on the feed screen. But after implementing it, whenever I try to like a post, it rebuilds the entire screen. Then I have to scroll from the top again.

class TestFeedScreen extends StatelessWidget {
  const TestFeedScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('posts')
            .orderBy('datePublished', descending: true)
            .snapshots()
            .distinct(),
        builder: (context,
            AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              PostModel post = PostModel.fromSnap(snapshot.data!.docs[index]);
              return FeedScreenItem(post: post);
            },
          );
        },
      ),
    );
  }
}

class FeedScreenItem extends StatelessWidget {
  const FeedScreenItem({
    Key? key,
    required this.post,
  }) : super(key: key);

  final PostModel post;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<UserModel>(
      future: DatabaseController().getUserDetails(post.uid),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const SizedBox();
        }
        UserModel userModel = snapshot.data!;
        String currentUserUid = FirebaseAuth.instance.currentUser!.uid;
        return PostCard(
          post: post,
          postUser: userModel,
          currentUserUid: currentUserUid,
        );
      },
    );
  }
}

Inside the scaffold body, there is the streambuilder which gets the posts from the posts collection. for every item in the stream, using listview builder a feed screen item is generated. Inside the generated feed screen item, there is a future builder which gets the user details of the post owner. current user uid is important because in cases of liking or unliking the post.

After the post is generated on the feed screen, when a post is liked or unliked, it will update it in the firebase firestore. Then the whole screen is getting rendered again, which is the problem. What can I do about it? What is the mistake I am doing?

This is the implementation I could think of for the use case. But if there are any other methods, pls suggest them.

Answer 1

You wrap your apps whole body with a streambuilder, so when a new data comes from the stream, all widgets inside the streambuilder will be updated. You should only wrap the widgets with streambuilder that you want to rebuild when new data comes.

Answer 2

Try using Obx from GetX instead of stream Builder. Inside your build method

final posts = <PostModel>[].obs;

and bind the "posts" with you stream.

posts.bindStream(yourStream...)

and then in builder,

Obx(() => ListView.builder(
  itemCount: posts.length,
  itemBuilder: (context, index) {
    var post = posts[index]
    return FeedScreenItem(post: post);
  },
));

It'll rebuild only the necessary changes. I think, you can also do the same with the combination of Provider and didChangeDependencies method.