feat(ui): Implement a Hero transition
This commit is contained in:
parent
bea3ff8b78
commit
e12b9a0c72
@ -159,23 +159,24 @@ class AnimeListPage extends StatelessWidget {
|
||||
);
|
||||
},
|
||||
child: AnimeCoverImage(
|
||||
url: anime.thumbnailUrl,
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
AnimeDetailsRequestedEvent(anime),
|
||||
);
|
||||
},
|
||||
extra: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: Text(
|
||||
'${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
url: anime.thumbnailUrl,
|
||||
hero: anime.id,
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
AnimeDetailsRequestedEvent(anime),
|
||||
);
|
||||
},
|
||||
extra: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: Text(
|
||||
'${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
@ -208,23 +209,24 @@ class AnimeListPage extends StatelessWidget {
|
||||
);
|
||||
},
|
||||
child: AnimeCoverImage(
|
||||
url: manga.thumbnailUrl,
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
MangaDetailsRequestedEvent(manga),
|
||||
);
|
||||
},
|
||||
extra: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: Text(
|
||||
'${manga.chaptersRead}/${manga.chaptersTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
hero: manga.id,
|
||||
url: manga.thumbnailUrl,
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
MangaDetailsRequestedEvent(manga),
|
||||
);
|
||||
},
|
||||
extra: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: Text(
|
||||
'${manga.chaptersRead}/${manga.chaptersTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
@ -38,9 +38,9 @@ class DetailsPage extends StatelessWidget {
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AnimeCoverImage(
|
||||
url: state.data!.thumbnailUrl,
|
||||
children: [AnimeCoverImage(
|
||||
url: state.data!.thumbnailUrl,
|
||||
hero: state.data!.id,
|
||||
),
|
||||
|
||||
Expanded(
|
||||
|
@ -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,46 +28,51 @@ class AnimeCoverImage extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: SizedBox(
|
||||
height: 100 * (16 / 9),
|
||||
width: 120,
|
||||
child: InkWell(
|
||||
onTap: onTap ?? () {},
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: cached ?
|
||||
CachedNetworkImageProvider(url) as ImageProvider :
|
||||
NetworkImage(url),
|
||||
fit: BoxFit.cover,
|
||||
return Hero(
|
||||
tag: hero,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Material(
|
||||
child: SizedBox(
|
||||
height: 100 * (16 / 9),
|
||||
width: 120,
|
||||
child: InkWell(
|
||||
onTap: onTap ?? () {},
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: cached ?
|
||||
CachedNetworkImageProvider(url) as ImageProvider :
|
||||
NetworkImage(url),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
if (extra != null)
|
||||
Positioned(
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
child: SizedBox(
|
||||
height: 40,
|
||||
child: ColoredBox(
|
||||
color: Colors.black54,
|
||||
child: extra,
|
||||
if (extra != null)
|
||||
Positioned(
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
child: SizedBox(
|
||||
height: 40,
|
||||
child: ColoredBox(
|
||||
color: Colors.black54,
|
||||
child: extra,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
@ -76,6 +76,8 @@ class ListItem extends StatelessWidget {
|
||||
children: [
|
||||
AnimeCoverImage(
|
||||
cached: cached,
|
||||
// TODO(Unknown): Have the ID here
|
||||
hero: thumbnailUrl,
|
||||
extra: imageExtra,
|
||||
url: thumbnailUrl,
|
||||
),
|
||||
|
Loading…
Reference in New Issue
Block a user