feat(ui): Implement a generic list item

This commit is contained in:
PapaTutuWawa 2023-02-04 11:58:15 +01:00
parent a60e9e8e81
commit cd1291a192
3 changed files with 52 additions and 66 deletions

View File

@ -3,7 +3,7 @@ import 'package:anitrack/src/data/type.dart';
import 'package:anitrack/src/ui/bloc/anime_list_bloc.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/anime_search_bloc.dart';
import 'package:anitrack/src/ui/constants.dart'; import 'package:anitrack/src/ui/constants.dart';
import 'package:anitrack/src/ui/widgets/anime.dart'; import 'package:anitrack/src/ui/widgets/list_item.dart';
import 'package:bottom_bar/bottom_bar.dart'; import 'package:bottom_bar/bottom_bar.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';
@ -81,8 +81,15 @@ class AnimeListPage extends StatelessWidget {
if (anime.state != state.filterState) return Container(); if (anime.state != state.filterState) return Container();
} }
return AnimeListWidget( return ListItem(
data: anime, title: anime.title,
thumbnailUrl: anime.thumbnailUrl,
extra: [
Text(
'${anime.episodesWatched}/${anime.episodesTotal ?? "???"}',
style: Theme.of(context).textTheme.titleMedium,
),
],
onLeftSwipe: () { onLeftSwipe: () {
context.read<AnimeListBloc>().add( context.read<AnimeListBloc>().add(
AnimeEpisodeDecrementedEvent(state.animes[index].id), AnimeEpisodeDecrementedEvent(state.animes[index].id),

View File

@ -3,7 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:anitrack/src/data/anime.dart'; import 'package:anitrack/src/data/anime.dart';
import 'package:anitrack/src/ui/bloc/anime_search_bloc.dart'; import 'package:anitrack/src/ui/bloc/anime_search_bloc.dart';
import 'package:anitrack/src/ui/constants.dart'; import 'package:anitrack/src/ui/constants.dart';
import 'package:anitrack/src/ui/widgets/anime.dart'; import 'package:anitrack/src/ui/widgets/list_item.dart';
import 'package:anitrack/src/ui/widgets/image.dart'; import 'package:anitrack/src/ui/widgets/image.dart';
class AnimeSearchPage extends StatelessWidget { class AnimeSearchPage extends StatelessWidget {
@ -54,7 +54,6 @@ class AnimeSearchPage extends StatelessWidget {
else else
Expanded( Expanded(
child: ListView.builder( child: ListView.builder(
//shrinkWrap: true,
itemCount: state.searchResults.length, itemCount: state.searchResults.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final item = state.searchResults[index]; final item = state.searchResults[index];
@ -64,32 +63,10 @@ class AnimeSearchPage extends StatelessWidget {
AnimeAddedEvent(item), AnimeAddedEvent(item),
); );
}, },
child: Padding( child: ListItem(
padding: const EdgeInsets.all(8), title: item.title,
child: Row( thumbnailUrl: item.thumbnailUrl,
crossAxisAlignment: CrossAxisAlignment.start, extra: [
children: [
AnimeCoverImage(
url: item.thumbnailUrl,
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
item.title,
style: Theme.of(context).textTheme.titleLarge,
maxLines: 2,
softWrap: true,
overflow: TextOverflow.ellipsis,
),
),
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: Text( child: Text(
@ -103,11 +80,6 @@ class AnimeSearchPage extends StatelessWidget {
), ),
], ],
), ),
),
),
],
),
),
); );
} }
), ),

View File

@ -4,29 +4,37 @@ import 'package:flutter/material.dart';
import 'package:swipeable_tile/swipeable_tile.dart'; import 'package:swipeable_tile/swipeable_tile.dart';
/// A widget for displaying simple data about an anime in the listview /// A widget for displaying simple data about an anime in the listview
class AnimeListWidget extends StatelessWidget { class ListItem extends StatelessWidget {
const AnimeListWidget({ ListItem({
required this.data, required this.thumbnailUrl,
required this.onLeftSwipe, required this.title,
required this.onRightSwipe, this.onLeftSwipe,
this.onRightSwipe,
this.extra = const [],
super.key, super.key,
}); });
/// The anime to display /// URL for the cover image.
final AnimeTrackingData data; final String thumbnailUrl;
/// Callbacks for the swipe functionality /// The title of the item
final void Function() onLeftSwipe; final String title;
final void Function() onRightSwipe;
/// Extra widgets.
final List<Widget> extra;
/// Callbacks for the swipe functionality.
final void Function()? onLeftSwipe;
final void Function()? onRightSwipe;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SwipeableTile.swipeToTrigger( return SwipeableTile.swipeToTrigger(
onSwiped: (direction) { onSwiped: (direction) {
if (direction == SwipeDirection.endToStart) { if (direction == SwipeDirection.endToStart) {
onRightSwipe(); onRightSwipe!();
} else if (direction == SwipeDirection.startToEnd) { } else if (direction == SwipeDirection.startToEnd) {
onLeftSwipe(); onLeftSwipe!();
} }
}, },
// TODO(PapaTutuWawa): Fix // TODO(PapaTutuWawa): Fix
@ -51,7 +59,9 @@ class AnimeListWidget extends StatelessWidget {
return Container(); return Container();
}, },
color: Theme.of(context).scaffoldBackgroundColor, color: Theme.of(context).scaffoldBackgroundColor,
direction: SwipeDirection.horizontal, direction: onRightSwipe != null && onLeftSwipe != null ?
SwipeDirection.horizontal :
SwipeDirection.none,
child: Padding( child: Padding(
padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(8),
child: Row( child: Row(
@ -62,7 +72,7 @@ class AnimeListWidget extends StatelessWidget {
child: SizedBox( child: SizedBox(
width: 100, width: 100,
child: Image.network( child: Image.network(
data.thumbnailUrl, thumbnailUrl,
), ),
), ),
), ),
@ -75,7 +85,7 @@ class AnimeListWidget extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
data.title, title,
textAlign: TextAlign.left, textAlign: TextAlign.left,
style: Theme.of(context).textTheme.titleLarge, style: Theme.of(context).textTheme.titleLarge,
maxLines: 2, maxLines: 2,
@ -83,10 +93,7 @@ class AnimeListWidget extends StatelessWidget {
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
Text( ...extra,
'${data.episodesWatched}/${data.episodesTotal ?? "???"}',
style: Theme.of(context).textTheme.titleMedium,
),
], ],
), ),
), ),