feat(ui): Implement a Hero transition

lib/src/ui/pages/anime_list.dart

@@ -160,6 +160,7 @@ class AnimeListPage extends StatelessWidget {
                       },
                       child: AnimeCoverImage(
                           url: anime.thumbnailUrl,
+                          hero: anime.id,
                           onTap: () {
                             context.read<DetailsBloc>().add(
                               AnimeDetailsRequestedEvent(anime),
@@ -208,6 +209,7 @@ class AnimeListPage extends StatelessWidget {
                         );
                       },
                       child: AnimeCoverImage(
+                        hero: manga.id,
                           url: manga.thumbnailUrl,
                           onTap: () {
                             context.read<DetailsBloc>().add(

lib/src/ui/pages/details.dart

@@ -38,9 +38,9 @@ class DetailsPage extends StatelessWidget {
               children: [
                 Row(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
+                  children: [AnimeCoverImage(
-                    AnimeCoverImage(
                         url: state.data!.thumbnailUrl,
+                        hero: state.data!.id,
                     ),
 
                     Expanded(

lib/src/ui/widgets/image.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 class AnimeCoverImage extends StatelessWidget {
   const AnimeCoverImage({
     required this.url,
+    required this.hero,
     this.cached = true,
     this.extra,
     this.onTap,
@@ -16,6 +17,9 @@ class AnimeCoverImage extends StatelessWidget {
   /// Flag indicating if the image should be cached.
   final bool cached;
 
+  /// The hero tag of the image.
+  final String hero;
+  
   /// An extra widget with a translucent backdrop.
   final Widget? extra;
 
@@ -24,8 +28,11 @@ class AnimeCoverImage extends StatelessWidget {
   
   @override
   Widget build(BuildContext context) {
-    return ClipRRect(
+    return Hero(
+      tag: hero,
+      child: ClipRRect(
         borderRadius: BorderRadius.circular(8),
+        child: Material(
           child: SizedBox(
             height: 100 * (16 / 9),
             width: 120,
@@ -67,6 +74,8 @@ class AnimeCoverImage extends StatelessWidget {
               ),
             ),
           ),
+        ),
+      ),
     );
   }
 }

lib/src/ui/widgets/list_item.dart

@@ -76,6 +76,8 @@ class ListItem extends StatelessWidget {
           children: [
             AnimeCoverImage(
               cached: cached,
+              // TODO(Unknown): Have the ID here
+              hero: thumbnailUrl,
               extra: imageExtra,
               url: thumbnailUrl,
             ),