feat(ui): Implement a simple details screen
This commit is contained in:
@@ -3,6 +3,7 @@ import 'package:anitrack/src/data/manga.dart';
|
||||
import 'package:anitrack/src/data/type.dart';
|
||||
import 'package:anitrack/src/ui/bloc/anime_list_bloc.dart';
|
||||
import 'package:anitrack/src/ui/bloc/anime_search_bloc.dart';
|
||||
import 'package:anitrack/src/ui/bloc/details_bloc.dart';
|
||||
import 'package:anitrack/src/ui/constants.dart';
|
||||
import 'package:anitrack/src/ui/widgets/list_item.dart';
|
||||
import 'package:bottom_bar/bottom_bar.dart';
|
||||
@@ -83,8 +84,8 @@ class AnimeListPage extends StatelessWidget {
|
||||
child: Text('Completed'),
|
||||
),
|
||||
const PopupMenuItem<MangaTrackingState>(
|
||||
value: MangaTrackingState.planToWatch,
|
||||
child: Text('Plan to watch'),
|
||||
value: MangaTrackingState.planToRead,
|
||||
child: Text('Plan to read'),
|
||||
),
|
||||
const PopupMenuItem<MangaTrackingState>(
|
||||
value: MangaTrackingState.dropped,
|
||||
@@ -123,25 +124,32 @@ class AnimeListPage extends StatelessWidget {
|
||||
if (anime.state != state.animeFilterState) return Container();
|
||||
}
|
||||
|
||||
return ListItem(
|
||||
title: anime.title,
|
||||
thumbnailUrl: anime.thumbnailUrl,
|
||||
extra: [
|
||||
Text(
|
||||
'${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
onLeftSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
AnimeEpisodeDecrementedEvent(state.animes[index].id),
|
||||
);
|
||||
},
|
||||
onRightSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
AnimeEpisodeIncrementedEvent(state.animes[index].id),
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
AnimeDetailsRequestedEvent(anime),
|
||||
);
|
||||
},
|
||||
child: ListItem(
|
||||
title: anime.title,
|
||||
thumbnailUrl: anime.thumbnailUrl,
|
||||
extra: [
|
||||
Text(
|
||||
'${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
onLeftSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
AnimeEpisodeDecrementedEvent(state.animes[index].id),
|
||||
);
|
||||
},
|
||||
onRightSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
AnimeEpisodeIncrementedEvent(state.animes[index].id),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
@@ -153,25 +161,32 @@ class AnimeListPage extends StatelessWidget {
|
||||
if (manga.state != state.mangaFilterState) return Container();
|
||||
}
|
||||
|
||||
return ListItem(
|
||||
title: manga.title,
|
||||
thumbnailUrl: manga.thumbnailUrl,
|
||||
extra: [
|
||||
Text(
|
||||
'${manga.chaptersRead}/${manga.chaptersTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
onLeftSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
MangaChapterDecrementedEvent(state.mangas[index].id),
|
||||
);
|
||||
},
|
||||
onRightSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
MangaChapterIncrementedEvent(state.mangas[index].id),
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
context.read<DetailsBloc>().add(
|
||||
MangaDetailsRequestedEvent(manga),
|
||||
);
|
||||
},
|
||||
child: ListItem(
|
||||
title: manga.title,
|
||||
thumbnailUrl: manga.thumbnailUrl,
|
||||
extra: [
|
||||
Text(
|
||||
'${manga.chaptersRead}/${manga.chaptersTotal ?? "???"}',
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
onLeftSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
MangaChapterDecrementedEvent(state.mangas[index].id),
|
||||
);
|
||||
},
|
||||
onRightSwipe: () {
|
||||
context.read<AnimeListBloc>().add(
|
||||
MangaChapterIncrementedEvent(state.mangas[index].id),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
174
lib/src/ui/pages/details.dart
Normal file
174
lib/src/ui/pages/details.dart
Normal file
@@ -0,0 +1,174 @@
|
||||
import 'package:anitrack/src/data/anime.dart';
|
||||
import 'package:anitrack/src/data/manga.dart';
|
||||
import 'package:anitrack/src/data/type.dart';
|
||||
import 'package:anitrack/src/ui/bloc/details_bloc.dart';
|
||||
import 'package:anitrack/src/ui/constants.dart';
|
||||
import 'package:anitrack/src/ui/widgets/image.dart';
|
||||
import 'package:anitrack/src/ui/widgets/list_item.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
|
||||
Widget _makeListTile(BuildContext context, dynamic value, String text, bool selected) {
|
||||
return ListTile(
|
||||
title: Text(text),
|
||||
trailing: selected ?
|
||||
Icon(Icons.check) :
|
||||
null,
|
||||
onTap: () {
|
||||
Navigator.of(context).pop(value);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
class DetailsPage extends StatelessWidget {
|
||||
static MaterialPageRoute<dynamic> get route => MaterialPageRoute<dynamic>(
|
||||
builder: (_) => DetailsPage(),
|
||||
settings: const RouteSettings(
|
||||
name: detailsRoute,
|
||||
),
|
||||
);
|
||||
|
||||
String _getTrackingStateText(DetailsState state) {
|
||||
if (state.trackingType == TrackingMediumType.anime) {
|
||||
return (state.data as AnimeTrackingData).state.toNameString();
|
||||
} else {
|
||||
return (state.data as MangaTrackingData).state.toNameString();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Details'),
|
||||
),
|
||||
body: BlocBuilder<DetailsBloc, DetailsState>(
|
||||
builder: (context, state) {
|
||||
return state.data == null ?
|
||||
Container() :
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: ListView(
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AnimeCoverImage(
|
||||
url: state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).thumbnailUrl :
|
||||
(state.data as MangaTrackingData).thumbnailUrl,
|
||||
),
|
||||
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 8,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).title :
|
||||
(state.data as MangaTrackingData).title,
|
||||
textAlign: TextAlign.left,
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
maxLines: 2,
|
||||
softWrap: true,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
|
||||
TextButton(
|
||||
child: Text(
|
||||
_getTrackingStateText(state),
|
||||
),
|
||||
onPressed: () async {
|
||||
final result = await showModalBottomSheet<dynamic>(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return ListView(
|
||||
shrinkWrap: true,
|
||||
children: [
|
||||
_makeListTile(
|
||||
context,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
AnimeTrackingState.watching :
|
||||
MangaTrackingState.reading,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
'Watching' :
|
||||
'Reading',
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).state == AnimeTrackingState.watching :
|
||||
(state.data as MangaTrackingData).state == MangaTrackingState.reading,
|
||||
),
|
||||
_makeListTile(
|
||||
context,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
AnimeTrackingState.completed :
|
||||
MangaTrackingState.completed,
|
||||
'Completed',
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).state == AnimeTrackingState.completed :
|
||||
(state.data as MangaTrackingData).state == MangaTrackingState.completed,
|
||||
),
|
||||
_makeListTile(
|
||||
context,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
AnimeTrackingState.planToWatch :
|
||||
MangaTrackingState.planToRead,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
'Plan to watch' :
|
||||
'Plan to read',
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).state == AnimeTrackingState.planToWatch :
|
||||
(state.data as MangaTrackingData).state == MangaTrackingState.planToRead,
|
||||
),
|
||||
_makeListTile(
|
||||
context,
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
AnimeTrackingState.dropped :
|
||||
MangaTrackingState.dropped,
|
||||
'Dropped',
|
||||
state.trackingType == TrackingMediumType.anime ?
|
||||
(state.data as AnimeTrackingData).state == AnimeTrackingState.dropped :
|
||||
(state.data as MangaTrackingData).state == MangaTrackingState.dropped,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (result == null) return;
|
||||
|
||||
if (state.trackingType == TrackingMediumType.anime) {
|
||||
context.read<DetailsBloc>().add(
|
||||
DetailsUpdatedEvent(
|
||||
(state.data as AnimeTrackingData).copyWith(
|
||||
state: result as AnimeTrackingState,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
context.read<DetailsBloc>().add(
|
||||
DetailsUpdatedEvent(
|
||||
(state.data as MangaTrackingData).copyWith(
|
||||
state: result as MangaTrackingState,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user