hero transition for bangumi image

Predidit · Jan 24, 2025 · b8eb075 · b8eb075
1 parent 6e1ae40
commit b8eb075
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 32 deletions.
diff --git a/lib/bean/card/bangumi_card.dart b/lib/bean/card/bangumi_card.dart
@@ -65,10 +65,14 @@ class BangumiCardV extends StatelessWidget {
                   child: LayoutBuilder(builder: (context, boxConstraints) {
                     final double maxWidth = boxConstraints.maxWidth;
                     final double maxHeight = boxConstraints.maxHeight;
-                    return NetworkImgLayer(
-                      src: bangumiItem.images['large'] ?? '',
-                      width: maxWidth,
-                      height: maxHeight,
+                    return Hero(
+                      transitionOnUserGestures: true,
+                      tag: bangumiItem.id,
+                      child: NetworkImgLayer(
+                        src: bangumiItem.images['large'] ?? '',
+                        width: maxWidth,
+                        height: maxHeight,
+                      ),
                     );
                   }),
                 ),
@@ -84,7 +88,9 @@ class BangumiCardV extends StatelessWidget {
 
 class BangumiContent extends StatelessWidget {
   const BangumiContent({super.key, required this.bangumiItem});
+
   final BangumiItem bangumiItem;
+
   @override
   Widget build(BuildContext context) {
     return Expanded(

diff --git a/lib/bean/card/bangumi_info_card.dart b/lib/bean/card/bangumi_info_card.dart
@@ -40,36 +40,40 @@ class _BangumiInfoCardVState extends State<BangumiInfoCardV> {
                 child: LayoutBuilder(builder: (context, boxConstraints) {
                   final double maxWidth = boxConstraints.maxWidth;
                   final double maxHeight = boxConstraints.maxHeight;
-                  return Stack(
-                    children: [
-                      NetworkImgLayer(
-                        src: widget.bangumiItem.images['large'] ?? '',
-                        width: maxWidth,
-                        height: maxHeight,
-                        fadeInDuration: const Duration(milliseconds: 0),
-                        fadeOutDuration: const Duration(milliseconds: 0),
-                      ),
-                      Positioned(
-                        right: 5,
-                        bottom: 5,
-                        child: Container(
-                          width: 40,
-                          height: 40,
-                          decoration: BoxDecoration(
-                            color: Theme.of(context)
-                                .colorScheme
-                                .secondaryContainer,
-                            shape: BoxShape.circle,
-                          ),
-                          child: CollectButton(
-                            bangumiItem: widget.bangumiItem,
-                            color: Theme.of(context)
-                                .colorScheme
-                                .onSecondaryContainer,
+                  return Hero(
+                    transitionOnUserGestures: true,
+                    tag: widget.bangumiItem.id,
+                    child: Stack(
+                      children: [
+                        NetworkImgLayer(
+                          src: widget.bangumiItem.images['large'] ?? '',
+                          width: maxWidth,
+                          height: maxHeight,
+                          fadeInDuration: const Duration(milliseconds: 0),
+                          fadeOutDuration: const Duration(milliseconds: 0),
+                        ),
+                        Positioned(
+                          right: 5,
+                          bottom: 5,
+                          child: Container(
+                            width: 40,
+                            height: 40,
+                            decoration: BoxDecoration(
+                              color: Theme.of(context)
+                                  .colorScheme
+                                  .secondaryContainer,
+                              shape: BoxShape.circle,
+                            ),
+                            child: CollectButton(
+                              bangumiItem: widget.bangumiItem,
+                              color: Theme.of(context)
+                                  .colorScheme
+                                  .onSecondaryContainer,
+                            ),
                           ),
                         ),
-                      ),
-                    ],
+                      ],
+                    ),
                   );
                 }),
               ),