💄 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,23 +221,9 @@ class _ExploreScreenState extends State<ExploreScreen> {
               onFetchData: _fetchPosts,
               itemBuilder: (context, idx) {
                 return Center(
-                  child: Container(
+                  child: OpenContainer(
-                    decoration: BoxDecoration(
+                    closedBuilder: (_, __) => Container(
-                      border: Border(
-                        left: BorderSide(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
-                        ),
-                        right: BorderSide(
-                          color: Theme.of(context).dividerColor,
-                          width: 1 / MediaQuery.of(context).devicePixelRatio,
-                        ),
-                      ),
-                    ),
                       constraints: const BoxConstraints(maxWidth: 640),
-                    child: Column(
-                      children: [
-                        GestureDetector(
                       child: PostItem(
                         data: _posts[idx],
                         maxWidth: 640,
@@ -245,20 +234,23 @@ class _ExploreScreenState extends State<ExploreScreen> {
                           _refreshPosts();
                         },
                       ),
-                          onTap: () {
-                            GoRouter.of(context).pushNamed(
-                              'postDetail',
-                              pathParameters: {'slug': _posts[idx].id.toString()},
-                              extra: _posts[idx],
-                            );
-                          },
                     ),
-                        const Divider(height: 1),
+                    openBuilder: (_, close) => PostDetailScreen(
-                      ],
+                      slug: _posts[idx].id.toString(),
+                      preload: _posts[idx],
+                      onBack: close,
+                    ),
+                    openColor: Colors.transparent,
+                    openElevation: 0,
+                    closedColor: Theme.of(context).colorScheme.surface,
+                    transitionType: ContainerTransitionType.fade,
+                    closedShape: const RoundedRectangleBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(8)),
                     ),
                   ),
                 );
               },
+              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,10 +65,15 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
     final ua = context.watch<UserProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
-    return Scaffold(
+    return AppBackground(
+      isRoot: widget.onBack != null,
+      child: Scaffold(
         appBar: AppBar(
           leading: BackButton(
             onPressed: () {
+              if (widget.onBack != null) {
+                widget.onBack!.call();
+              }
               if (GoRouter.of(context).canPop()) {
                 GoRouter.of(context).pop(context);
                 return;
@@ -185,6 +188,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
             SliverGap(math.max(MediaQuery.of(context).padding.bottom, 16)),
           ],
         ),
+      ),
     );
   }
 }