kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: improve carousel performance

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2025-01-06 21:44:06 +06:00
parent 46852545a9
commit 3ffcb48db9
1 changed files with 84 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
lib/modules/home/sections/genres.dart
View File

@ -31,12 +31,12 @@ class HomeGenresSection extends HookConsumerWidget {
() => () =>
categoriesQuery.asData?.value categoriesQuery.asData?.value
.where((c) => (c.icons?.length ?? 0) > 0) .where((c) => (c.icons?.length ?? 0) > 0)
.take(mediaQuery.mdAndDown ? 6 : 10) .take(6)
.toList() ?? .toList() ??
[ [
FakeData.category, FakeData.category,
], ],
[mediaQuery.mdAndDown, categoriesQuery.asData?.value], [categoriesQuery.asData?.value],
); );
final controller = useMemoized(() => CarouselController(), []); final controller = useMemoized(() => CarouselController(), []);
final interactedRef = useRef(false); final interactedRef = useRef(false);
@ -159,101 +159,95 @@ class HomeGenresSection extends HookConsumerWidget {
child: Skeleton.ignore( child: Skeleton.ignore(
child: Skeletonizer( child: Skeletonizer(
enabled: playlists.isLoading, enabled: playlists.isLoading,
child: SingleChildScrollView( child: ListView.separated(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
child: Row( itemCount: playlistsData.length,
spacing: 12, separatorBuilder: (context, index) =>
mainAxisAlignment: MainAxisAlignment.center, const Gap(12),
children: [ itemBuilder: (context, index) {
for (final playlist in playlistsData) final playlist =
Container( playlistsData.elementAt(index);
width: 115 * theme.scaling,
decoration: BoxDecoration( return Container(
color: theme.colorScheme.background width: 115 * theme.scaling,
.withAlpha(75), decoration: BoxDecoration(
borderRadius: theme.borderRadiusMd, 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;
if (states.isNotEmpty) {
return decoration;
}
return decoration.copyWith(
color: decoration.color
?.withAlpha(180),
);
},
), ),
child: SurfaceBlur( onPressed: () {
borderRadius: theme.borderRadiusMd, context.pushNamed(
surfaceBlur: theme.surfaceBlur, PlaylistPage.name,
child: Button( pathParameters: {
style: ButtonVariance.secondary "id": playlist.id!,
.copyWith(
padding:
(context, states, value) =>
const EdgeInsets.all(8),
decoration:
(context, states, value) {
final decoration =
ButtonVariance.secondary
.decoration(
context, states)
as BoxDecoration;
if (states.isNotEmpty) {
return decoration;
}
return decoration.copyWith(
color: decoration.color
?.withAlpha(180),
);
},
),
onPressed: () {
context.pushNamed(
PlaylistPage.name,
pathParameters: {
"id": playlist.id!,
},
extra: playlist,
);
}, },
child: Column( extra: playlist,
crossAxisAlignment: );
CrossAxisAlignment.start, },
spacing: 5, child: Column(
children: [ crossAxisAlignment:
ClipRRect( CrossAxisAlignment.start,
borderRadius: spacing: 5,
theme.borderRadiusSm, children: [
child: UniversalImage( ClipRRect(
path: (playlist.images)! borderRadius:
.asUrlString( theme.borderRadiusSm,
placeholder: child: UniversalImage(
ImagePlaceholder path: (playlist.images)!
.collection, .asUrlString(
index: 1, placeholder: ImagePlaceholder
), .collection,
fit: BoxFit.cover, index: 1,
height: 100 * theme.scaling,
width: 100 * theme.scaling,
),
), ),
Text( fit: BoxFit.cover,
playlist.name!, height: 100 * theme.scaling,
maxLines: 2, width: 100 * theme.scaling,
overflow: ),
TextOverflow.ellipsis,
).semiBold().small(),
if (playlist.description !=
null)
Text(
playlist.description
?.unescapeHtml()
.cleanHtml() ??
"",
maxLines: 2,
overflow:
TextOverflow.ellipsis,
).xSmall().muted(),
],
), ),
), 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(),
],
), ),
), ),
], ),
), );
},
), ),
), ),
), ),