feat(ui): Implement a Hero transition
This commit is contained in:
parent
bea3ff8b78
commit
e12b9a0c72
@ -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(
|
||||||
|
@ -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(
|
||||||
|
@ -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 {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
),
|
),
|
||||||
|
Loading…
Reference in New Issue
Block a user