1.3.4+40: Fix "Navigating to or from a comment item is causing the PostPage to rebuild, loosing the state"

Author: felipebueno

lib/views/pages/post/post_page.dart

@@ -19,64 +19,88 @@ class PostPage extends StatefulWidget {
 }
 
 class _PostPageState extends State<PostPage> {
+  Future<Post>? _postFuture;
+  Post? _post;
+  bool _isInitialized = false;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    // Fetch route arguments only once
+    // Fix https://github.com/felipebueno/stacker_news/issues/18
+    // TODO: Apply the fix on all pages and widgets that are using ModdalRoute
+    if (!_isInitialized) {
+      final post = ModalRoute.of(context)?.settings.arguments as Post;
+      _post = post;
+      _postFuture = _fetchPostDetails(post.id ?? '');
+      _isInitialized = true;
+    }
+  }
+
   Future<Post> _fetchPostDetails(String id) async {
     return await locator<SNApiClient>().fetchPostDetails(id);
   }
 
   @override
   Widget build(BuildContext context) {
-    final post = ModalRoute.of(context)?.settings.arguments as Post;
-
     return GenericPageScaffold(
-      title: post.pageTitle ?? '#${post.id}',
-      body: FutureBuilder(
-        future: _fetchPostDetails(post.id ?? ''),
-        builder: (context, snapshot) {
-          if (snapshot.connectionState == ConnectionState.waiting ||
-              !snapshot.hasData) {
-            return const Center(child: CircularProgressIndicator());
-          }
-
-          if (snapshot.hasError) {
-            final err = snapshot.error.toString();
-            Utils.showError(err);
+      title: _post == null ? 'Loading...' : _post!.pageTitle ?? '#${_post!.id}',
+      body: _post == null
+          ? const Center(child: CircularProgressIndicator())
+          : FutureBuilder(
+              future: _postFuture,
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.waiting ||
+                    !snapshot.hasData) {
+                  return const Center(child: CircularProgressIndicator());
+                }
 
-            return PostListError(err);
-          }
+                if (snapshot.hasError) {
+                  final err = snapshot.error.toString();
+                  Utils.showError(err);
 
-          final item = snapshot.data as Post;
+                  return PostListError(err);
+                }
 
-          final comments = item.comments ?? [];
+                final item = snapshot.data as Post;
+                final comments = item.comments ?? [];
 
-          return RefreshIndicator(
-            onRefresh: () async {
-              setState(() {});
-            },
-            child: ListView.separated(
-              itemBuilder: (context, index) {
-                if (index == 0) {
-                  return Column(
-                    crossAxisAlignment: CrossAxisAlignment.end,
-                    children: [
-                      PostItem(item, isCommentsPage: true),
-                      ReplyField(
-                        item,
-                        onCommentCreated: () {
-                          setState(() {});
-                        },
-                      ),
-                    ],
-                  );
-                }
+                return RefreshIndicator(
+                  onRefresh: () async {
+                    setState(() {
+                      _postFuture = _fetchPostDetails(_post!.id ?? '');
+                    });
+                  },
+                  child: ListView.separated(
+                    addAutomaticKeepAlives: true,
+                    itemBuilder: (context, index) {
+                      if (index == 0) {
+                        return Column(
+                          crossAxisAlignment: CrossAxisAlignment.end,
+                          children: [
+                            PostItem(item, isCommentsPage: true),
+                            ReplyField(
+                              item,
+                              onCommentCreated: () {
+                                setState(() {
+                                  _postFuture =
+                                      _fetchPostDetails(_post!.id ?? '');
+                                });
+                              },
+                            ),
+                          ],
+                        );
+                      }
 
-                return CommentItem(comments[index - 1]);
+                      return CommentItem(comments[index - 1]);
+                    },
+                    separatorBuilder: (context, index) => const Divider(),
+                    itemCount: comments.length + 1,
+                  ),
+                );
               },
-              separatorBuilder: (context, index) => const Divider(),
-              itemCount: comments.length + 1,
             ),
-          );
-        },
-      ),
     );
   }
 }

pubspec.yaml

@@ -11,7 +11,7 @@ description: A new Flutter project.
 # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
-version: 1.3.3+39
+version: 1.3.4+40
 
 environment:
   sdk: ">=3.4.0 <4.0.0"