From 3ffcb48db9bcc377b78cab33342172464180ab7d Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Mon, 6 Jan 2025 21:44:06 +0600 Subject: [PATCH] chore: improve carousel performance --- lib/modules/home/sections/genres.dart | 172 +++++++++++++------------- 1 file changed, 83 insertions(+), 89 deletions(-) diff --git a/lib/modules/home/sections/genres.dart b/lib/modules/home/sections/genres.dart index add61a5a..9309e2e7 100644 --- a/lib/modules/home/sections/genres.dart +++ b/lib/modules/home/sections/genres.dart @@ -31,12 +31,12 @@ class HomeGenresSection extends HookConsumerWidget { () => categoriesQuery.asData?.value .where((c) => (c.icons?.length ?? 0) > 0) - .take(mediaQuery.mdAndDown ? 6 : 10) + .take(6) .toList() ?? [ FakeData.category, ], - [mediaQuery.mdAndDown, categoriesQuery.asData?.value], + [categoriesQuery.asData?.value], ); final controller = useMemoized(() => CarouselController(), []); final interactedRef = useRef(false); @@ -159,101 +159,95 @@ class HomeGenresSection extends HookConsumerWidget { child: Skeleton.ignore( child: Skeletonizer( enabled: playlists.isLoading, - child: SingleChildScrollView( + child: ListView.separated( scrollDirection: Axis.horizontal, - child: Row( - spacing: 12, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - for (final playlist in playlistsData) - Container( - width: 115 * theme.scaling, - decoration: BoxDecoration( - color: theme.colorScheme.background - .withAlpha(75), - borderRadius: theme.borderRadiusMd, - ), - child: SurfaceBlur( - borderRadius: theme.borderRadiusMd, - surfaceBlur: theme.surfaceBlur, - child: Button( - style: ButtonVariance.secondary - .copyWith( - padding: - (context, states, value) => - const EdgeInsets.all(8), - decoration: - (context, states, value) { - final decoration = - ButtonVariance.secondary - .decoration( - context, states) - as BoxDecoration; + itemCount: playlistsData.length, + separatorBuilder: (context, index) => + const Gap(12), + itemBuilder: (context, index) { + final playlist = + playlistsData.elementAt(index); - if (states.isNotEmpty) { - return decoration; - } + return Container( + width: 115 * theme.scaling, + decoration: BoxDecoration( + color: theme.colorScheme.background + .withAlpha(75), + borderRadius: theme.borderRadiusMd, + ), + child: SurfaceBlur( + borderRadius: theme.borderRadiusMd, + surfaceBlur: theme.surfaceBlur, + child: Button( + style: + ButtonVariance.secondary.copyWith( + padding: (context, states, value) => + const EdgeInsets.all(8), + decoration: (context, states, value) { + final decoration = ButtonVariance + .secondary + .decoration(context, states) + as BoxDecoration; - return decoration.copyWith( - color: decoration.color - ?.withAlpha(180), - ); - }, - ), - onPressed: () { - context.pushNamed( - PlaylistPage.name, - pathParameters: { - "id": playlist.id!, - }, - extra: playlist, - ); + if (states.isNotEmpty) { + return decoration; + } + + return decoration.copyWith( + color: decoration.color + ?.withAlpha(180), + ); + }, + ), + onPressed: () { + context.pushNamed( + PlaylistPage.name, + pathParameters: { + "id": playlist.id!, }, - child: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - spacing: 5, - children: [ - ClipRRect( - borderRadius: - theme.borderRadiusSm, - child: UniversalImage( - path: (playlist.images)! - .asUrlString( - placeholder: - ImagePlaceholder - .collection, - index: 1, - ), - fit: BoxFit.cover, - height: 100 * theme.scaling, - width: 100 * theme.scaling, - ), + extra: playlist, + ); + }, + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + spacing: 5, + children: [ + ClipRRect( + borderRadius: + theme.borderRadiusSm, + child: UniversalImage( + path: (playlist.images)! + .asUrlString( + placeholder: ImagePlaceholder + .collection, + index: 1, ), - Text( - playlist.name!, - maxLines: 2, - overflow: - TextOverflow.ellipsis, - ).semiBold().small(), - if (playlist.description != - null) - Text( - playlist.description - ?.unescapeHtml() - .cleanHtml() ?? - "", - maxLines: 2, - overflow: - TextOverflow.ellipsis, - ).xSmall().muted(), - ], + fit: BoxFit.cover, + height: 100 * theme.scaling, + width: 100 * theme.scaling, + ), ), - ), + Text( + playlist.name!, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ).semiBold().small(), + if (playlist.description != null) + Text( + playlist.description + ?.unescapeHtml() + .cleanHtml() ?? + "", + maxLines: 2, + overflow: TextOverflow.ellipsis, + ).xSmall().muted(), + ], ), ), - ], - ), + ), + ); + }, ), ), ),