feat(ui): Implement a Hero transition

This commit is contained in:
PapaTutuWawa 2023-02-08 20:24:31 +01:00
parent bea3ff8b78
commit e12b9a0c72
4 changed files with 80 additions and 67 deletions

View File

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

View File

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

View File

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

View File

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