💄 Optimized post list

lib/screens/explore.dart

@@ -1,3 +1,4 @@
+import 'package:animations/animations.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
@@ -8,6 +9,7 @@ import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/post.dart';
 import 'package:surface/providers/sn_network.dart';
+import 'package:surface/screens/post/post_detail.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/app_bar_leading.dart';
 import 'package:surface/widgets/dialog.dart';
@@ -210,6 +212,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
                 ),
               ),
             ),
+            const SliverGap(8),
             SliverInfiniteList(
               itemCount: _posts.length,
               isLoading: _isBusy,
@@ -218,47 +221,36 @@ class _ExploreScreenState extends State<ExploreScreen> {
               onFetchData: _fetchPosts,
               itemBuilder: (context, idx) {
                 return Center(
-                  child: Container(
+                  child: OpenContainer(
-                    decoration: BoxDecoration(
+                    closedBuilder: (_, __) => Container(
-                      border: Border(
+                      constraints: const BoxConstraints(maxWidth: 640),
-                        left: BorderSide(
+                      child: PostItem(
-                          color: Theme.of(context).dividerColor,
+                        data: _posts[idx],
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
+                        maxWidth: 640,
-                        ),
+                        onChanged: (data) {
-                        right: BorderSide(
+                          setState(() => _posts[idx] = data);
-                          color: Theme.of(context).dividerColor,
+                        },
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
+                        onDeleted: () {
-                        ),
+                          _refreshPosts();
+                        },
                       ),
                     ),
-                    constraints: const BoxConstraints(maxWidth: 640),
+                    openBuilder: (_, close) => PostDetailScreen(
-                    child: Column(
+                      slug: _posts[idx].id.toString(),
-                      children: [
+                      preload: _posts[idx],
-                        GestureDetector(
+                      onBack: close,
-                          child: PostItem(
+                    ),
-                            data: _posts[idx],
+                    openColor: Colors.transparent,
-                            maxWidth: 640,
+                    openElevation: 0,
-                            onChanged: (data) {
+                    closedColor: Theme.of(context).colorScheme.surface,
-                              setState(() => _posts[idx] = data);
+                    transitionType: ContainerTransitionType.fade,
-                            },
+                    closedShape: const RoundedRectangleBorder(
-                            onDeleted: () {
+                      borderRadius: BorderRadius.all(Radius.circular(8)),
-                              _refreshPosts();
-                            },
-                          ),
-                          onTap: () {
-                            GoRouter.of(context).pushNamed(
-                              'postDetail',
-                              pathParameters: {'slug': _posts[idx].id.toString()},
-                              extra: _posts[idx],
-                            );
-                          },
-                        ),
-                        const Divider(height: 1),
-                      ],
                     ),
                   ),
                 );
               },
+              separatorBuilder: (_, __) => const Gap(8),
             ),
           ],
         ),

lib/screens/post/post_detail.dart

@@ -13,6 +13,7 @@ import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/loading_indicator.dart';
+import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/post/post_comment_list.dart';
 import 'package:surface/widgets/post/post_item.dart';
 import 'package:surface/widgets/post/post_mini_editor.dart';
@@ -20,12 +21,9 @@ import 'package:surface/widgets/post/post_mini_editor.dart';
 class PostDetailScreen extends StatefulWidget {
   final String slug;
   final SnPost? preload;
+  final Function? onBack;
 
-  const PostDetailScreen({
+  const PostDetailScreen({super.key, required this.slug, this.preload, this.onBack});
-    super.key,
-    required this.slug,
-    this.preload,
-  });
 
   @override
   State<PostDetailScreen> createState() => _PostDetailScreenState();
@@ -67,123 +65,129 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
     final ua = context.watch<UserProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
-    return Scaffold(
+    return AppBackground(
-      appBar: AppBar(
+      isRoot: widget.onBack != null,
-        leading: BackButton(
+      child: Scaffold(
-          onPressed: () {
+        appBar: AppBar(
-            if (GoRouter.of(context).canPop()) {
+          leading: BackButton(
-              GoRouter.of(context).pop(context);
+            onPressed: () {
-              return;
+              if (widget.onBack != null) {
-            }
+                widget.onBack!.call();
-            GoRouter.of(context).replaceNamed('explore');
+              }
-          },
+              if (GoRouter.of(context).canPop()) {
-        ),
+                GoRouter.of(context).pop(context);
-        title: _data?.body['title'] != null
+                return;
-            ? RichText(
+              }
-                textAlign: TextAlign.center,
+              GoRouter.of(context).replaceNamed('explore');
-                text: TextSpan(children: [
+            },
-                  TextSpan(
-                    text: _data?.body['title'] ?? 'postNoun'.tr(),
-                    style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                          color: Theme.of(context).appBarTheme.foregroundColor!,
-                        ),
-                  ),
-                  const TextSpan(text: '\n'),
-                  TextSpan(
-                    text: 'postDetail'.tr(),
-                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                          color: Theme.of(context).appBarTheme.foregroundColor!,
-                        ),
-                  ),
-                ]),
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-              )
-            : Text('postDetail').tr(),
-      ),
-      body: CustomScrollView(
-        slivers: [
-          SliverToBoxAdapter(
-            child: LoadingIndicator(isActive: _isBusy),
           ),
-          if (_data != null)
+          title: _data?.body['title'] != null
-            SliverToBoxAdapter(
+              ? RichText(
-              child: PostItem(
+                  textAlign: TextAlign.center,
-                data: _data!,
+                  text: TextSpan(children: [
-                maxWidth: 640,
+                    TextSpan(
-                showComments: false,
+                      text: _data?.body['title'] ?? 'postNoun'.tr(),
-                showFullPost: true,
+                      style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                onChanged: (data) {
+                            color: Theme.of(context).appBarTheme.foregroundColor!,
-                  setState(() => _data = data);
-                },
-                onDeleted: () {
-                  Navigator.pop(context);
-                },
-              ),
-            ),
-          const SliverToBoxAdapter(child: Divider(height: 1)),
-          if (_data != null)
-            SliverToBoxAdapter(
-              child: Container(
-                constraints: const BoxConstraints(maxWidth: 640),
-                child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: [
-                    const Icon(Symbols.comment, size: 24),
-                    const Gap(16),
-                    Text('postCommentsDetailed')
-                        .plural(_data!.metric.replyCount)
-                        .textStyle(Theme.of(context).textTheme.titleLarge!),
-                  ],
-                ).padding(horizontal: 20, vertical: 12).center(),
-              ),
-            ),
-          if (_data != null && ua.isAuthorized)
-            SliverToBoxAdapter(
-              child: Container(
-                height: 240,
-                constraints: const BoxConstraints(maxWidth: 640),
-                margin:
-                    ResponsiveBreakpoints.of(context).largerThan(MOBILE) ? const EdgeInsets.all(8) : EdgeInsets.zero,
-                decoration: BoxDecoration(
-                  borderRadius: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
-                      ? const BorderRadius.all(Radius.circular(8))
-                      : BorderRadius.zero,
-                  border: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
-                      ? Border.all(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / devicePixelRatio,
-                        )
-                      : Border.symmetric(
-                          horizontal: BorderSide(
-                            color: Theme.of(context).dividerColor,
-                            width: 1 / devicePixelRatio,
                           ),
-                        ),
+                    ),
-                ),
+                    const TextSpan(text: '\n'),
-                child: PostMiniEditor(
+                    TextSpan(
-                  postReplyId: _data!.id,
+                      text: 'postDetail'.tr(),
-                  onPost: () {
+                      style: Theme.of(context).textTheme.bodySmall!.copyWith(
-                    setState(() {
+                            color: Theme.of(context).appBarTheme.foregroundColor!,
-                      _data = _data!.copyWith(
+                          ),
-                        metric: _data!.metric.copyWith(
+                    ),
-                          replyCount: _data!.metric.replyCount + 1,
+                  ]),
-                        ),
+                  maxLines: 2,
-                      );
+                  overflow: TextOverflow.ellipsis,
-                    });
+                )
-                    _childListKey.currentState!.refresh();
+              : Text('postDetail').tr(),
+        ),
+        body: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(
+              child: LoadingIndicator(isActive: _isBusy),
+            ),
+            if (_data != null)
+              SliverToBoxAdapter(
+                child: PostItem(
+                  data: _data!,
+                  maxWidth: 640,
+                  showComments: false,
+                  showFullPost: true,
+                  onChanged: (data) {
+                    setState(() => _data = data);
+                  },
+                  onDeleted: () {
+                    Navigator.pop(context);
                   },
                 ),
-              ).center(),
+              ),
-            ),
+            const SliverToBoxAdapter(child: Divider(height: 1)),
-          if (_data != null)
+            if (_data != null)
-            PostCommentSliverList(
+              SliverToBoxAdapter(
-              key: _childListKey,
+                child: Container(
-              parentPostId: _data!.id,
+                  constraints: const BoxConstraints(maxWidth: 640),
-              maxWidth: 640,
+                  child: Row(
-            ),
+                    crossAxisAlignment: CrossAxisAlignment.center,
-          SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
+                    children: [
-        ],
+                      const Icon(Symbols.comment, size: 24),
+                      const Gap(16),
+                      Text('postCommentsDetailed')
+                          .plural(_data!.metric.replyCount)
+                          .textStyle(Theme.of(context).textTheme.titleLarge!),
+                    ],
+                  ).padding(horizontal: 20, vertical: 12).center(),
+                ),
+              ),
+            if (_data != null && ua.isAuthorized)
+              SliverToBoxAdapter(
+                child: Container(
+                  height: 240,
+                  constraints: const BoxConstraints(maxWidth: 640),
+                  margin:
+                      ResponsiveBreakpoints.of(context).largerThan(MOBILE) ? const EdgeInsets.all(8) : EdgeInsets.zero,
+                  decoration: BoxDecoration(
+                    borderRadius: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
+                        ? const BorderRadius.all(Radius.circular(8))
+                        : BorderRadius.zero,
+                    border: ResponsiveBreakpoints.of(context).largerThan(MOBILE)
+                        ? Border.all(
+                            color: Theme.of(context).dividerColor,
+                            width: 1 / devicePixelRatio,
+                          )
+                        : Border.symmetric(
+                            horizontal: BorderSide(
+                              color: Theme.of(context).dividerColor,
+                              width: 1 / devicePixelRatio,
+                            ),
+                          ),
+                  ),
+                  child: PostMiniEditor(
+                    postReplyId: _data!.id,
+                    onPost: () {
+                      setState(() {
+                        _data = _data!.copyWith(
+                          metric: _data!.metric.copyWith(
+                            replyCount: _data!.metric.replyCount + 1,
+                          ),
+                        );
+                      });
+                      _childListKey.currentState!.refresh();
+                    },
+                  ),
+                ).center(),
+              ),
+            if (_data != null)
+              PostCommentSliverList(
+                key: _childListKey,
+                parentPostId: _data!.id,
+                maxWidth: 640,
+              ),
+            SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
+          ],
+        ),
       ),
     );
   }