PapaTutuWawa/anitrack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): Implement a Hero transition

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
lib/src/ui/pages/anime_list.dart
View File

@ -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,
),
),
),
),
),
);
},
),

6
lib/src/ui/pages/details.dart
View File

@ -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(

81
lib/src/ui/widgets/image.dart
View File

@ -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,
),
),
),
),
),
],
],
),
),
),
),
),

2
lib/src/ui/widgets/list_item.dart
View File

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