fix: Multiple fixes

- Improve performance when a lot of items are "unknown". Thanks to https://github.com/dattran-pt19/group_grid_view
- Fix some behaviour in the refresh code
This commit is contained in:
PapaTutuWawa 2023-07-16 17:37:47 +02:00
parent 1481841009
commit f081bd7c43
3 changed files with 238 additions and 215 deletions

View File

@ -36,6 +36,8 @@ class AnimeListBloc extends Bloc<AnimeListEvent, AnimeListState> {
final List<MangaTrackingData> _mangas = final List<MangaTrackingData> _mangas =
List<MangaTrackingData>.empty(growable: true); List<MangaTrackingData>.empty(growable: true);
List<AnimeTrackingData> get unfilteredAnime => _animes;
List<AnimeTrackingData> _getFilteredAnime({ List<AnimeTrackingData> _getFilteredAnime({
MediumTrackingState? trackingState, MediumTrackingState? trackingState,
}) { }) {

View File

@ -28,7 +28,7 @@ class CalendarBloc extends Bloc<CalendarEvent, CalendarState> {
); );
final al = GetIt.I.get<AnimeListBloc>(); final al = GetIt.I.get<AnimeListBloc>();
final animes = al.state.animes.where((anime) => anime.airing); final animes = al.unfilteredAnime.where((anime) => anime.airing);
emit( emit(
state.copyWith( state.copyWith(
refreshing: true, refreshing: true,
@ -40,21 +40,33 @@ class CalendarBloc extends Bloc<CalendarEvent, CalendarState> {
for (final anime in animes) { for (final anime in animes) {
emit(state.copyWith(refreshingCount: state.refreshingCount + 1)); emit(state.copyWith(refreshingCount: state.refreshingCount + 1));
Anime apiData; String? broadcastDay;
bool airing;
try { try {
apiData = await Jikan().getAnime(int.parse(anime.id)); final apiData = await Jikan().getAnime(int.parse(anime.id));
} catch (_) { airing = apiData.airing;
print('API request for anime ${anime.id} failed'); broadcastDay = apiData.broadcast?.split(' ').first;
continue; } catch (ex) {
print('API request for anime ${anime.id} failed: $ex');
airing = false;
} }
if (!apiData.airing) { print('Anime "${anime.title}": airing=${airing}');
if (!airing) {
al.add( al.add(
AnimeUpdatedEvent( AnimeUpdatedEvent(
anime.copyWith(airing: false, broadcastDay: null), anime.copyWith(airing: false, broadcastDay: null),
commit: true, commit: true,
), ),
); );
} else if (anime.broadcastDay != broadcastDay) {
print('Updating Anime "${anime.title}": broadcastDay=$broadcastDay');
al.add(
AnimeUpdatedEvent(
anime.copyWith(airing: true, broadcastDay: broadcastDay),
commit: true,
),
);
} }
// Prevent hammering Jikan // Prevent hammering Jikan

View File

@ -9,6 +9,7 @@ import 'package:anitrack/src/ui/widgets/grid_item.dart';
import 'package:anitrack/src/ui/widgets/image.dart'; import 'package:anitrack/src/ui/widgets/image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:get_it/get_it.dart';
enum Weekday { enum Weekday {
monday, monday,
@ -52,7 +53,7 @@ extension AddIfExists<K, V> on Map<K, List<V>> {
} }
} }
class CalendarPage extends StatelessWidget { class CalendarPage extends StatefulWidget {
const CalendarPage({super.key}); const CalendarPage({super.key});
static MaterialPageRoute<dynamic> get route => MaterialPageRoute<dynamic>( static MaterialPageRoute<dynamic> get route => MaterialPageRoute<dynamic>(
@ -62,6 +63,11 @@ class CalendarPage extends StatelessWidget {
), ),
); );
@override
CalendarPageState createState() => CalendarPageState();
}
class CalendarPageState extends State<CalendarPage> {
List<Widget> _renderWeekdayList( List<Widget> _renderWeekdayList(
BuildContext context, BuildContext context,
Weekday day, Weekday day,
@ -73,231 +79,234 @@ class CalendarPage extends StatelessWidget {
assert(data[day]!.isNotEmpty, 'There should be at least one anime'); assert(data[day]!.isNotEmpty, 'There should be at least one anime');
return [ return [
Padding( SliverToBoxAdapter(
padding: const EdgeInsets.only( child: Padding(
left: 16, padding: const EdgeInsets.only(
right: 16, left: 0,
top: 16, right: 16,
bottom: 4, top: 20,
), bottom: 4,
child: Text( ),
day.toName(), child: Text(
style: Theme.of(context).textTheme.titleLarge, day.toName(),
style: Theme.of(context).textTheme.titleLarge,
),
), ),
), ),
Padding( SliverGrid.builder(
padding: const EdgeInsets.symmetric(horizontal: 16), gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
child: GridView.builder( crossAxisCount: 3,
physics: const NeverScrollableScrollPhysics(), mainAxisSpacing: 8,
shrinkWrap: true, crossAxisSpacing: 8,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( childAspectRatio: 120 / (100 * (16 / 9)),
crossAxisCount: 3,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 120 / (100 * (16 / 9)),
),
itemCount: data[day]!.length,
itemBuilder: (context, index) {
final anime = data[day]![index];
return GridItem(
child: AnimeCoverImage(
url: anime.thumbnailUrl,
hero: 'calendar_${anime.id}',
onTap: () {
context.read<DetailsBloc>().add(
AnimeDetailsRequestedEvent(
anime,
heroImagePrefix: 'calendar_',
),
);
},
),
);
},
), ),
itemCount: data[day]!.length,
itemBuilder: (context, index) {
final anime = data[day]![index];
return GridItem(
child: AnimeCoverImage(
url: anime.thumbnailUrl,
hero: 'calendar_${anime.id}',
onTap: () {
context.read<DetailsBloc>().add(
AnimeDetailsRequestedEvent(
anime,
heroImagePrefix: 'calendar_',
),
);
},
),
);
},
), ),
]; ];
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<CalendarBloc, CalendarState>( final airingAnimeMap = <Weekday, List<AnimeTrackingData>>{};
builder: (context, calendarState) => for (final anime in GetIt.I.get<AnimeListBloc>().unfilteredAnime) {
BlocBuilder<AnimeListBloc, AnimeListState>( if (!anime.airing) continue;
buildWhen: (previous, current) => !calendarState.refreshing,
builder: (context, state) {
final airingAnimeMap = <Weekday, List<AnimeTrackingData>>{};
for (final anime in state.animes) {
if (!anime.airing) continue;
final Weekday day; final Weekday day;
switch (anime.broadcastDay) { switch (anime.broadcastDay) {
case 'Mondays': case 'Mondays':
day = Weekday.monday; day = Weekday.monday;
break; break;
case 'Tuesdays': case 'Tuesdays':
day = Weekday.tuesday; day = Weekday.tuesday;
break; break;
case 'Wednesdays': case 'Wednesdays':
day = Weekday.wednesday; day = Weekday.wednesday;
break; break;
case 'Thursdays': case 'Thursdays':
day = Weekday.thursday; day = Weekday.thursday;
break; break;
case 'Fridays': case 'Fridays':
day = Weekday.friday; day = Weekday.friday;
break; break;
case 'Saturdays': case 'Saturdays':
day = Weekday.saturday; day = Weekday.saturday;
break; break;
case 'Sundays': case 'Sundays':
day = Weekday.sunday; day = Weekday.sunday;
break; break;
default: default:
day = Weekday.unknown; day = Weekday.unknown;
break; break;
} }
airingAnimeMap.addOrSet(day, anime); airingAnimeMap.addOrSet(day, anime);
} }
return Scaffold( return BlocListener<CalendarBloc, CalendarState>(
appBar: AppBar( listenWhen: (previous, current) =>
title: Text(t.calendar.calendar), previous.refreshing != current.refreshing,
actions: [ listener: (context, state) {
IconButton( // Force an update
onPressed: () { if (!state.refreshing) {
context.read<CalendarBloc>().add(RefreshPerformedEvent()); setState(() {});
}, }
icon: const Icon(Icons.refresh), },
), child: Scaffold(
], appBar: AppBar(
title: Text(t.calendar.calendar),
actions: [
IconButton(
onPressed: () {
context.read<CalendarBloc>().add(RefreshPerformedEvent());
},
icon: const Icon(Icons.refresh),
), ),
drawer: getDrawer(context), ],
body: Stack( ),
children: [ drawer: getDrawer(context),
Positioned( body: Stack(
left: 0, children: [
right: 0, Positioned(
top: 0, left: 8,
bottom: 0, right: 8,
child: ListView( top: 0,
children: [ bottom: 0,
// Render all available weekdays child: CustomScrollView(
..._renderWeekdayList( slivers: [
context, // Render all available weekdays
Weekday.unknown, ..._renderWeekdayList(
airingAnimeMap, context,
), Weekday.unknown,
..._renderWeekdayList( airingAnimeMap,
context,
Weekday.monday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.tuesday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.wednesday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.thursday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.friday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.saturday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.sunday,
airingAnimeMap,
),
// Provide a nice bottom padding, while keeping the elastic effect attached
// to the bottom-most edge.
const SizedBox(
height: 16,
),
],
), ),
), ..._renderWeekdayList(
Positioned( context,
left: 0, Weekday.monday,
right: 0, airingAnimeMap,
top: 0, ),
bottom: 0, ..._renderWeekdayList(
child: BlocBuilder<CalendarBloc, CalendarState>( context,
builder: (context, state) { Weekday.tuesday,
if (!state.refreshing) { airingAnimeMap,
return const SizedBox(); ),
} ..._renderWeekdayList(
context,
return const ModalBarrier( Weekday.wednesday,
dismissible: false, airingAnimeMap,
color: Colors.black54, ),
); ..._renderWeekdayList(
}, context,
Weekday.thursday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.friday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.saturday,
airingAnimeMap,
),
..._renderWeekdayList(
context,
Weekday.sunday,
airingAnimeMap,
), ),
),
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: BlocBuilder<CalendarBloc, CalendarState>(
builder: (context, state) {
if (!state.refreshing) {
return const SizedBox();
}
return Center( // Provide a nice bottom padding, while keeping the elastic effect attached
child: SizedBox( // to the bottom-most edge.
width: 150, const SliverToBoxAdapter(
height: 150, child: SizedBox(
child: DecoratedBox( height: 16,
decoration: BoxDecoration( ),
borderRadius: BorderRadius.circular(10), ),
color: Colors.grey.shade800, ],
), ),
child: Column( ),
mainAxisSize: MainAxisSize.min, Positioned(
mainAxisAlignment: MainAxisAlignment.center, left: 0,
children: [ right: 0,
const Padding( top: 0,
padding: EdgeInsets.all(25), bottom: 0,
child: CircularProgressIndicator(), child: BlocBuilder<CalendarBloc, CalendarState>(
), buildWhen: (previous, current) =>
Text( previous.refreshing != current.refreshing,
t.settings.importIndicator( builder: (context, state) {
current: state.refreshingCount, if (!state.refreshing) {
total: state.refreshingTotal, return const SizedBox();
), }
style: Theme.of(context).textTheme.bodyMedium,
), return const ModalBarrier(
], dismissible: false,
), color: Colors.black54,
), );
},
),
),
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: BlocBuilder<CalendarBloc, CalendarState>(
builder: (context, state) {
if (!state.refreshing) {
return const SizedBox();
}
return Center(
child: SizedBox(
width: 150,
height: 150,
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.shade800,
), ),
); child: Column(
}, mainAxisSize: MainAxisSize.min,
), mainAxisAlignment: MainAxisAlignment.center,
), children: [
], const Padding(
padding: EdgeInsets.all(25),
child: CircularProgressIndicator(),
),
Text(
t.settings.importIndicator(
current: state.refreshingCount,
total: state.refreshingTotal,
),
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
),
);
},
),
), ),
); ],
}, ),
), ),
); );
} }