💫 Better animated post list

ios/Podfile.lock

@@ -145,7 +145,7 @@ PODS:
     - SDWebImage/Core (= 5.19.4)
   - SDWebImage/Core (5.19.4)
   - Sentry/HybridSDK (8.32.0)
-  - sentry_flutter (8.5.0):
+  - sentry_flutter (8.6.0):
     - Flutter
     - FlutterMacOS
     - Sentry/HybridSDK (= 8.32.0)
@@ -309,7 +309,7 @@ SPEC CHECKSUMS:
   screen_brightness_ios: 715ca807df953bf676d339f11464e438143ee625
   SDWebImage: 066c47b573f408f18caa467d71deace7c0f8280d
   Sentry: 96ae1dcdf01a644bc3a3b1dc279cecaf48a833fb
-  sentry_flutter: f1d86adcb93a959bc47a40d8d55059bdf7569bc5
+  sentry_flutter: 090351ce1ff5f96a4b33ef9455b7e3b28185387d
   share_plus: 8875f4f2500512ea181eef553c3e27dba5135aad
   shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec

lib/screens/posts/post_detail.dart

@@ -9,8 +9,13 @@ import 'package:solian/widgets/posts/post_replies.dart';
 
 class PostDetailScreen extends StatefulWidget {
   final String id;
+  final Post? post;
 
-  const PostDetailScreen({super.key, required this.id});
+  const PostDetailScreen({
+    super.key,
+    required this.id,
+    this.post,
+  });
 
   @override
   State<PostDetailScreen> createState() => _PostDetailScreenState();
@@ -20,6 +25,11 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
   Post? item;
 
   Future<Post?> getDetail() async {
+    if (widget.post != null) {
+      item = widget.post;
+      return widget.post;
+    }
+
     final PostProvider provider = Get.find();
 
     try {

lib/shells/title_shell.dart

@@ -8,13 +8,15 @@ import 'package:solian/widgets/app_bar_leading.dart';
 class TitleShell extends StatelessWidget {
   final bool showAppBar;
   final bool isCenteredTitle;
-  final GoRouterState state;
+  final String? title;
+  final GoRouterState? state;
   final Widget child;
 
   const TitleShell({
     super.key,
     required this.child,
-    required this.state,
+    this.title,
+    this.state,
     this.showAppBar = true,
     this.isCenteredTitle = false,
   });
@@ -25,7 +27,9 @@ class TitleShell extends StatelessWidget {
       appBar: showAppBar
           ? AppBar(
               leading: AppBarLeadingButton.adaptive(context),
-              title: AppBarTitle(state.topRoute?.name?.tr ?? 'page'.tr),
+              title: AppBarTitle(
+                title ?? (state!.topRoute?.name?.tr ?? 'page'.tr),
+              ),
               centerTitle: isCenteredTitle,
               toolbarHeight: SolianTheme.toolbarHeight(context),
             )

lib/widgets/posts/post_item.dart

@@ -1,9 +1,11 @@
+import 'package:animations/animations.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get_utils/get_utils.dart';
 import 'package:intl/intl.dart';
 import 'package:solian/models/post.dart';
-import 'package:solian/router.dart';
+import 'package:solian/screens/posts/post_detail.dart';
+import 'package:solian/shells/title_shell.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/account/account_profile_popup.dart';
 import 'package:solian/widgets/attachments/attachment_list.dart';
@@ -159,66 +161,88 @@ class _PostItemState extends State<PostItem> {
   }
 
   Widget _buildReply(BuildContext context) {
-    return Column(
+    return OpenContainer(
-      children: [
+      closedBuilder: (_, openContainer) => Column(
-        Row(
+        children: [
-          children: [
+          Row(
-            FaIcon(
+            children: [
-              FontAwesomeIcons.reply,
+              FaIcon(
-              size: 16,
+                FontAwesomeIcons.reply,
-              color: _unFocusColor,
+                size: 16,
-            ),
+                color: _unFocusColor,
-            Expanded(
+              ),
-              child: Text(
+              Expanded(
-                'postRepliedNotify'.trParams(
+                child: Text(
-                  {'username': '@${widget.item.replyTo!.author.name}'},
+                  'postRepliedNotify'.trParams(
-                ),
+                    {'username': '@${widget.item.replyTo!.author.name}'},
-                style: TextStyle(color: _unFocusColor),
+                  ),
-              ).paddingOnly(left: 6),
+                  style: TextStyle(color: _unFocusColor),
-            ),
+                ).paddingOnly(left: 6),
-          ],
+              ),
-        ).paddingOnly(left: 12),
+            ],
-        Card(
+          ).paddingOnly(left: 12),
-          elevation: 1,
+          Card(
-          child: PostItem(
+            elevation: 1,
-            item: widget.item.replyTo!,
+            child: PostItem(
-            isCompact: true,
+              item: widget.item.replyTo!,
-            overrideAttachmentParent: widget.item.id.toString(),
+              isCompact: true,
-          ).paddingSymmetric(vertical: 8),
+              overrideAttachmentParent: widget.item.id.toString(),
+            ).paddingSymmetric(vertical: 8),
+          ),
+        ],
+      ),
+      openBuilder: (_, __) => TitleShell(
+        title: 'postDetail'.tr,
+        child: PostDetailScreen(
+          id: widget.item.replyTo!.id.toString(),
+          post: widget.item.replyTo!,
         ),
-      ],
+      ),
+      closedColor: Theme.of(context).colorScheme.surface,
+      openColor: Theme.of(context).colorScheme.surface,
     );
   }
 
   Widget _buildRepost(BuildContext context) {
-    return Column(
+    return OpenContainer(
-      children: [
+      closedBuilder: (_, openContainer) => Column(
-        Row(
+        children: [
-          children: [
+          Row(
-            FaIcon(
+            children: [
-              FontAwesomeIcons.retweet,
+              FaIcon(
-              size: 16,
+                FontAwesomeIcons.retweet,
-              color: _unFocusColor,
+                size: 16,
-            ),
+                color: _unFocusColor,
-            Expanded(
+              ),
-              child: Text(
+              Expanded(
-                'postRepostedNotify'.trParams(
+                child: Text(
-                  {'username': '@${widget.item.repostTo!.author.name}'},
+                  'postRepostedNotify'.trParams(
-                ),
+                    {'username': '@${widget.item.repostTo!.author.name}'},
-                style: TextStyle(color: _unFocusColor),
+                  ),
-              ).paddingOnly(left: 6),
+                  style: TextStyle(color: _unFocusColor),
-            ),
+                ).paddingOnly(left: 6),
-          ],
+              ),
-        ).paddingOnly(left: 12),
+            ],
-        Card(
+          ).paddingOnly(left: 12),
-          elevation: 1,
+          Card(
-          child: PostItem(
+            elevation: 1,
-            item: widget.item.repostTo!,
+            child: PostItem(
-            isCompact: true,
+              item: widget.item.repostTo!,
-            overrideAttachmentParent: widget.item.id.toString(),
+              isCompact: true,
-          ).paddingSymmetric(vertical: 8),
+              overrideAttachmentParent: widget.item.id.toString(),
+            ).paddingSymmetric(vertical: 8),
+          ),
+        ],
+      ),
+      openBuilder: (_, __) => TitleShell(
+        title: 'postDetail'.tr,
+        child: PostDetailScreen(
+          id: widget.item.repostTo!.id.toString(),
+          post: widget.item.repostTo!,
         ),
-      ],
+      ),
+      closedColor: Theme.of(context).colorScheme.surface,
+      openColor: Theme.of(context).colorScheme.surface,
     );
   }
 
@@ -264,100 +288,89 @@ class _PostItemState extends State<PostItem> {
       );
     }
 
-    return Column(
+    return OpenContainer(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      closedBuilder: (_, openContainer) => Column(
-      children: [
+        crossAxisAlignment: CrossAxisAlignment.start,
-        Row(
+        children: [
-          crossAxisAlignment: CrossAxisAlignment.start,
+          Row(
-          children: [
+            crossAxisAlignment: CrossAxisAlignment.start,
-            GestureDetector(
+            children: [
-              child: AccountAvatar(content: item.author.avatar.toString()),
+              GestureDetector(
-              onTap: () {
+                child: AccountAvatar(content: item.author.avatar.toString()),
-                showModalBottomSheet(
+                onTap: () {
-                  useRootNavigator: true,
+                  showModalBottomSheet(
-                  isScrollControlled: true,
+                    useRootNavigator: true,
-                  backgroundColor: Theme.of(context).colorScheme.surface,
+                    isScrollControlled: true,
-                  context: context,
+                    backgroundColor: Theme.of(context).colorScheme.surface,
-                  builder: (context) => AccountProfilePopup(
+                    context: context,
-                    account: item.author,
+                    builder: (context) => AccountProfilePopup(
-                  ),
+                      account: item.author,
-                );
-              },
-            ),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  _buildHeader(),
-                  SizedContainer(
-                    maxWidth: 640,
-                    child: MarkdownTextContent(
-                      content: item.body['content'],
-                      isSelectable: widget.isContentSelectable,
-                    ).paddingOnly(left: 12, right: 8),
-                  ),
-                  if (widget.item.replyTo != null && widget.isShowEmbed)
-                    GestureDetector(
-                      child: _buildReply(context).paddingOnly(top: 4),
-                      onTap: () {
-                        if (!widget.isClickable) return;
-                        AppRouter.instance.pushNamed(
-                          'postDetail',
-                          pathParameters: {
-                            'id': widget.item.replyTo!.id.toString(),
-                          },
-                        );
-                      },
                     ),
-                  if (widget.item.repostTo != null && widget.isShowEmbed)
+                  );
-                    GestureDetector(
+                },
-                      child: _buildRepost(context).paddingOnly(top: 4),
-                      onTap: () {
-                        if (!widget.isClickable) return;
-                        AppRouter.instance.pushNamed(
-                          'postDetail',
-                          pathParameters: {
-                            'alias': widget.item.repostTo!.id.toString(),
-                          },
-                        );
-                      },
-                    ),
-                  _buildFooter().paddingOnly(left: 12),
-                ],
               ),
-            ),
+              Expanded(
-          ],
+                child: Column(
-        ).paddingOnly(
+                  crossAxisAlignment: CrossAxisAlignment.start,
-          top: 10,
+                  children: [
-          bottom: hasAttachment ? 10 : 0,
+                    _buildHeader(),
-          right: 16,
+                    SizedContainer(
-          left: 16,
+                      maxWidth: 640,
-        ),
+                      child: MarkdownTextContent(
-        AttachmentList(
+                        content: item.body['content'],
-          parentId: widget.item.id.toString(),
+                        isSelectable: widget.isContentSelectable,
-          attachmentsId: attachments,
+                      ).paddingOnly(left: 12, right: 8),
-          isGrid: attachments.length > 1,
+                    ),
-        ),
+                    if (widget.item.replyTo != null && widget.isShowEmbed)
-        if (widget.isShowReply && widget.isReactable)
+                      _buildReply(context).paddingOnly(top: 4),
-          PostQuickAction(
+                    if (widget.item.repostTo != null && widget.isShowEmbed)
-            isShowReply: widget.isShowReply,
+                      _buildRepost(context).paddingOnly(top: 4),
-            isReactable: widget.isReactable,
+                    _buildFooter().paddingOnly(left: 12),
-            item: widget.item,
+                  ],
-            onReact: (symbol, changes) {
+                ),
-              setState(() {
+              ),
-                item.metric!.reactionList[symbol] =
+            ],
-                    (item.metric!.reactionList[symbol] ?? 0) + changes;
-              });
-            },
           ).paddingOnly(
-            top: hasAttachment ? 10 : 6,
+            top: 10,
-            left: hasAttachment ? 24 : 60,
+            bottom: hasAttachment ? 10 : 0,
             right: 16,
-            bottom: 10,
+            left: 16,
-          )
+          ),
-        else
+          AttachmentList(
-          const SizedBox(height: 10),
+            parentId: widget.item.id.toString(),
-      ],
+            attachmentsId: attachments,
+            isGrid: attachments.length > 1,
+          ),
+          if (widget.isShowReply && widget.isReactable)
+            PostQuickAction(
+              isShowReply: widget.isShowReply,
+              isReactable: widget.isReactable,
+              item: widget.item,
+              onReact: (symbol, changes) {
+                setState(() {
+                  item.metric!.reactionList[symbol] =
+                      (item.metric!.reactionList[symbol] ?? 0) + changes;
+                });
+              },
+            ).paddingOnly(
+              top: hasAttachment ? 10 : 6,
+              left: hasAttachment ? 24 : 60,
+              right: 16,
+              bottom: 10,
+            )
+          else
+            const SizedBox(height: 10),
+        ],
+      ),
+      openBuilder: (_, __) => TitleShell(
+        title: 'postDetail'.tr,
+        child: PostDetailScreen(
+          id: item.id.toString(),
+          post: item,
+        ),
+      ),
+      closedColor: Theme.of(context).colorScheme.surface,
+      openColor: Theme.of(context).colorScheme.surface,
     );
   }
 }

pubspec.lock

@@ -25,6 +25,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.4.1"
+  animations:
+    dependency: "direct main"
+    description:
+      name: animations
+      sha256: d3d6dcfb218225bbe68e87ccf6378bbb2e32a94900722c5f81611dad089911cb
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.11"
   archive:
     dependency: transitive
     description:
@@ -133,26 +141,26 @@ packages:
     dependency: "direct main"
     description:
       name: cached_network_image
-      sha256: "28ea9690a8207179c319965c13cd8df184d5ee721ae2ce60f398ced1219cea1f"
+      sha256: "4a5d8d2c728b0f3d0245f69f921d7be90cae4c2fd5288f773088672c0893f819"
       url: "https://pub.dev"
     source: hosted
-    version: "3.3.1"
+    version: "3.4.0"
   cached_network_image_platform_interface:
     dependency: transitive
     description:
       name: cached_network_image_platform_interface
-      sha256: "9e90e78ae72caa874a323d78fa6301b3fb8fa7ea76a8f96dc5b5bf79f283bf2f"
+      sha256: ff0c949e323d2a1b52be73acce5b4a7b04063e61414c8ca542dbba47281630a7
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.0"
+    version: "4.1.0"
   cached_network_image_web:
     dependency: transitive
     description:
       name: cached_network_image_web
-      sha256: "205d6a9f1862de34b93184f22b9d2d94586b2f05c581d546695e3d8f6a805cd7"
+      sha256: "6322dde7a5ad92202e64df659241104a43db20ed594c41ca18de1014598d7996"
       url: "https://pub.dev"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.0"
   carousel_slider:
     dependency: "direct main"
     description:
@@ -301,10 +309,10 @@ packages:
     dependency: transitive
     description:
       name: dev_build
-      sha256: "5600100e28f7424ed53728e8e7aa6bc0e0506ec04bb49a82616f62112c1822c3"
+      sha256: "76dd5b2587a891ab9c1e7f7eea6ca4a3504667321e0186ecb1e385183889d89b"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0+8"
+    version: "1.0.0+10"
   device_info_plus:
     dependency: "direct main"
     description:
@@ -1092,10 +1100,10 @@ packages:
     dependency: transitive
     description:
       name: octo_image
-      sha256: "45b40f99622f11901238e18d48f5f12ea36426d8eced9f4cbf58479c7aa2430d"
+      sha256: "34faa6639a78c7e3cbe79be6f9f96535867e879748ade7d17c9b1ae7536293bd"
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.0"
+    version: "2.1.0"
   package_config:
     dependency: transitive
     description:
@@ -1436,18 +1444,18 @@ packages:
     dependency: transitive
     description:
       name: sentry
-      sha256: "60756499f09c3ed944640d7993ac527a89f7c3033f13ec12ae145706b269b5c8"
+      sha256: "76ad4fab90ff82427c26939bd79dc4df345a081e2b1cd5954b947e340b9af9a5"
       url: "https://pub.dev"
     source: hosted
-    version: "8.5.0"
+    version: "8.6.0"
   sentry_flutter:
     dependency: "direct main"
     description:
       name: sentry_flutter
-      sha256: "26cfe89cb08a60d9bc0c4e748a0508e223ae378265aec8ed2a2b48f0d2c936b9"
+      sha256: a7c92014701093a7c0a373e1a47c54ec428d8468d8bf2b793fee7ea1b085c21b
       url: "https://pub.dev"
     source: hosted
-    version: "8.5.0"
+    version: "8.6.0"
   share_plus:
     dependency: "direct main"
     description:
@@ -1468,10 +1476,10 @@ packages:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: c3f888ba2d659f3e75f4686112cc1e71f46177f74452d40d8307edc332296ead
+      sha256: c272f9cabca5a81adc9b0894381e9c1def363e980f960fa903c604c471b22f68
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.3.1"
   shared_preferences_android:
     dependency: transitive
     description:

pubspec.yaml

@@ -66,6 +66,7 @@ dependencies:
   dio: ^5.5.0+1
   image_cropper: ^8.0.1
   markdown_toolbar: ^0.5.0
+  animations: ^2.0.11
 
 dev_dependencies:
   flutter_test: