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

feat(ui): Switch to a grid-based layout

Browse Source
This commit is contained in:
PapaTutuWawa 2023-02-08 20:05:47 +01:00
parent 4688924ec2
commit bea3ff8b78
5 changed files with 312 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
lib/src/ui/bloc/anime_list_bloc.dart
View File

@ -28,10 +28,39 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
on<MangaRemovedEvent>(_onMangaRemoved);
}
/// Internal anime state
final List<AnimeTrackingData> _animes = List<AnimeTrackingData>.empty(growable: true);
final List<MangaTrackingData> _mangas = List<MangaTrackingData>.empty(growable: true);
List<AnimeTrackingData> _getFilteredAnime({MediumTrackingState? trackingState}) {
final filterState = trackingState ?? state.animeFilterState;
if (filterState == MediumTrackingState.all) return _animes;
return _animes
.where((anime) => anime.state == filterState)
.toList();
}
List<MangaTrackingData> _getFilteredManga({MediumTrackingState? trackingState}) {
final filterState = trackingState ?? state.mangaFilterState;
if (state.mangaFilterState == MediumTrackingState.all) return _mangas;
return _mangas
.where((manga) => manga.state == filterState)
.toList();
}
Future<void> _onAnimeAdded(AnimeAddedEvent event, Emitter<AnimeListState> emit) async {
// Add the anime to the database
await GetIt.I.get<DatabaseService>().addAnime(event.data);
// Add it to the cache
_animes.add(event.data);
if (event.data.state == state.animeFilterState ||
state.animeFilterState == MediumTrackingState.all) {
emit(
state.copyWith(
animes: List.from([
@ -41,11 +70,17 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
),
);
}
}
Future<void> _onMangaAdded(MangaAddedEvent event, Emitter<AnimeListState> emit) async {
// Add the manga to the database
await GetIt.I.get<DatabaseService>().addManga(event.data);
// Add it to the cache
_mangas.add(event.data);
if (event.data.state == state.mangaFilterState ||
state.mangaFilterState == MediumTrackingState.all) {
emit(
state.copyWith(
mangas: List.from([
@ -55,6 +90,7 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
),
);
}
}
Future<void> _onAnimeIncremented(AnimeEpisodeIncrementedEvent event, Emitter<AnimeListState> emit) async {
final index = state.animes.indexWhere((item) => item.id == event.id);
@ -101,10 +137,17 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
}
Future<void> _onAnimesLoaded(AnimesLoadedEvent event, Emitter<AnimeListState> emit) async {
_animes.addAll(
await GetIt.I.get<DatabaseService>().loadAnimes(),
);
_mangas.addAll(
await GetIt.I.get<DatabaseService>().loadMangas(),
);
emit(
state.copyWith(
animes: await GetIt.I.get<DatabaseService>().loadAnimes(),
mangas: await GetIt.I.get<DatabaseService>().loadMangas(),
animes: _getFilteredAnime(),
mangas: _getFilteredManga(),
),
);
}
@ -113,6 +156,7 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
emit(
state.copyWith(
animeFilterState: event.filterState,
animes: _getFilteredAnime(trackingState: event.filterState),
),
);
}
@ -121,6 +165,7 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
emit(
state.copyWith(
mangaFilterState: event.filterState,
mangas: _getFilteredManga(trackingState: event.filterState),
),
);
}
@ -135,7 +180,7 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
Future<void> _onMangaIncremented(MangaChapterIncrementedEvent event, Emitter<AnimeListState> emit) async {
final index = state.mangas.indexWhere((item) => item.id == event.id);
if (index == -1) return;
assert(index != -1, 'The manga must exist');
final manga = state.mangas[index];
if (manga.chaptersTotal != null && manga.chaptersRead + 1 > manga.chaptersTotal!) return;
@ -146,6 +191,11 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
);
newList[index] = newManga;
// Update the cache
final cacheIndex = _mangas.indexWhere((m) => m.id == event.id);
assert(cacheIndex != -1, 'The manga must exist');
_mangas[cacheIndex] = newManga;
emit(
state.copyWith(
mangas: newList,
@ -168,6 +218,11 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
);
newList[index] = newManga;
// Update the cache
final cacheIndex = _mangas.indexWhere((m) => m.id == event.id);
assert(cacheIndex != -1, 'The manga must exist');
_mangas[cacheIndex] = newManga;
emit(
state.copyWith(
mangas: newList,
@ -178,33 +233,27 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
}
Future<void> _onAnimeUpdated(AnimeUpdatedEvent event, Emitter<AnimeListState> emit) async {
final index = _animes.indexWhere((anime) => anime.id == event.anime.id);
assert(index != -1, 'The anime must exist');
_animes[index] = event.anime;
emit(
state.copyWith(
animes: List.from(
state.animes.map((anime) {
if (anime.id == event.anime.id) {
return event.anime;
}
return anime;
}),
),
animes: _getFilteredAnime(),
),
);
}
Future<void> _onMangaUpdated(MangaUpdatedEvent event, Emitter<AnimeListState> emit) async {
final index = _mangas.indexWhere((manga) => manga.id == event.manga.id);
assert(index != -1, 'The manga must exist');
_mangas[index] = event.manga;
emit(
state.copyWith(
mangas: List.from(
state.mangas.map((manga) {
if (manga.id == event.manga.id) {
return event.manga;
}
return manga;
}),
),
mangas: _getFilteredManga(),
),
);
}
@ -218,6 +267,11 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
),
);
// Update the cache
final cacheIndex = _mangas.indexWhere((m) => m.id == event.id);
assert(cacheIndex != -1, 'The anime must exist');
_mangas.removeAt(cacheIndex);
// Update the database
await GetIt.I.get<DatabaseService>().deleteAnime(event.id);
}
@ -231,6 +285,11 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
),
);
// Update the cache
final cacheIndex = _animes.indexWhere((a) => a.id == event.id);
assert(cacheIndex != -1, 'The manga must exist');
_animes.removeAt(cacheIndex);
// Update the database
await GetIt.I.get<DatabaseService>().deleteManga(event.id);
}

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

@ -3,7 +3,8 @@ 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:anitrack/src/ui/widgets/grid_item.dart';
import 'package:anitrack/src/ui/widgets/image.dart';
import 'package:bottom_bar/bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@ -130,80 +131,104 @@ class AnimeListPage extends StatelessWidget {
physics: const NeverScrollableScrollPhysics(),
controller: _controller,
children: [
ListView.builder(
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 120 / (100 * (16 / 9)),
),
itemCount: state.animes.length,
itemBuilder: (context, index) {
final anime = state.animes[index];
if (state.animeFilterState != MediumTrackingState.all) {
if (anime.state != state.animeFilterState) return Container();
}
return InkWell(
return GridItem(
minusCallback: () {
context.read<AnimeListBloc>().add(
AnimeEpisodeDecrementedEvent(
anime.id,
),
);
},
plusCallback: () {
context.read<AnimeListBloc>().add(
AnimeEpisodeIncrementedEvent(
anime.id,
),
);
},
child: AnimeCoverImage(
url: anime.thumbnailUrl,
onTap: () {
context.read<DetailsBloc>().add(
AnimeDetailsRequestedEvent(anime),
);
},
child: ListItem(
title: anime.title,
thumbnailUrl: anime.thumbnailUrl,
extra: [
Text(
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,
),
],
onLeftSwipe: () {
context.read<AnimeListBloc>().add(
AnimeEpisodeDecrementedEvent(state.animes[index].id),
);
},
onRightSwipe: () {
context.read<AnimeListBloc>().add(
AnimeEpisodeIncrementedEvent(state.animes[index].id),
);
},
),
),
),
);
},
),
ListView.builder(
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 120 / (100 * (16 / 9)),
),
itemCount: state.mangas.length,
itemBuilder: (context, index) {
final manga = state.mangas[index];
if (state.mangaFilterState != MediumTrackingState.all) {
if (manga.state != state.mangaFilterState) return Container();
}
return InkWell(
return GridItem(
minusCallback: () {
context.read<AnimeListBloc>().add(
MangaChapterDecrementedEvent(
manga.id,
),
);
},
plusCallback: () {
context.read<AnimeListBloc>().add(
MangaChapterIncrementedEvent(
manga.id,
),
);
},
child: AnimeCoverImage(
url: manga.thumbnailUrl,
onTap: () {
context.read<DetailsBloc>().add(
MangaDetailsRequestedEvent(manga),
);
},
child: ListItem(
title: manga.title,
thumbnailUrl: manga.thumbnailUrl,
extra: [
Text(
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,
),
],
onLeftSwipe: () {
context.read<AnimeListBloc>().add(
MangaChapterDecrementedEvent(state.mangas[index].id),
);
},
onRightSwipe: () {
context.read<AnimeListBloc>().add(
MangaChapterIncrementedEvent(state.mangas[index].id),
);
},
),
),
),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(

72
lib/src/ui/widgets/grid_item.dart Normal file
View File

@ -0,0 +1,72 @@
import 'dart:math';
import 'package:flutter/material.dart';
class GridItem extends StatefulWidget {
const GridItem({
required this.child,
required this.plusCallback,
required this.minusCallback,
super.key,
});
final Widget child;
final void Function() plusCallback;
final void Function() minusCallback;
@override
GridItemState createState() => GridItemState();
}
class GridItemState extends State<GridItem> {
double _offset = 0;
@override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragUpdate: (details) {
setState(() {
_offset += details.delta.dx;
});
},
onHorizontalDragEnd: (_) {
if (_offset <= 50) {
widget.plusCallback();
} else if (_offset >= -50) {
widget.minusCallback();
}
// Reset the view
setState(() => _offset = 0);
},
child: Stack(
children: [
const Positioned(
left: 0,
right: 15,
top: 0,
bottom: 0,
child: Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add),
),
),
const Positioned(
left: 15,
right: 0,
top: 0,
bottom: 0,
child: Align(
alignment: Alignment.centerLeft,
child: Icon(Icons.remove),
),
),
Positioned(
left: 160 / (1 + exp(-1 * (1/30) * _offset)) - 80,
child: widget.child,
),
],
),
);
}
}

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

@ -5,15 +5,23 @@ class AnimeCoverImage extends StatelessWidget {
const AnimeCoverImage({
required this.url,
this.cached = true,
this.extra,
this.onTap,
super.key,
});
/// The URL to the cover image.
final String url;
/// Flag indicating if the image should be cached
/// Flag indicating if the image should be cached.
final bool cached;
/// An extra widget with a translucent backdrop.
final Widget? extra;
/// Callback for when the image is tapped.
final void Function()? onTap;
@override
Widget build(BuildContext context) {
return ClipRRect(
@ -21,6 +29,15 @@ class AnimeCoverImage extends StatelessWidget {
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(
@ -32,6 +49,24 @@ class AnimeCoverImage extends StatelessWidget {
),
),
),
if (extra != null)
Positioned(
left: 0,
bottom: 0,
right: 0,
child: SizedBox(
height: 40,
child: ColoredBox(
color: Colors.black54,
child: extra,
),
),
),
],
),
),
),
);
}
}

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

@ -12,6 +12,7 @@ class ListItem extends StatelessWidget {
this.onRightSwipe,
this.cached = true,
this.extra = const [],
this.imageExtra,
super.key,
});
@ -24,6 +25,8 @@ class ListItem extends StatelessWidget {
/// Extra widgets.
final List<Widget> extra;
final Widget? imageExtra;
/// Callbacks for the swipe functionality.
final void Function()? onLeftSwipe;
final void Function()? onRightSwipe;
@ -73,6 +76,7 @@ class ListItem extends StatelessWidget {
children: [
AnimeCoverImage(
cached: cached,
extra: imageExtra,
url: thumbnailUrl,
),