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
.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,
itemCount: playlistsData.length,
separatorBuilder: (context, index) =>
const Gap(12),
itemBuilder: (context, index) {
final playlist =
playlistsData.elementAt(index);
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;
if (states.isNotEmpty) {
return decoration;
}
return decoration.copyWith(
color: decoration.color
?.withAlpha(180),
);
},
),
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),
);
},
),
onPressed: () {
context.pushNamed(
PlaylistPage.name,
pathParameters: {
"id": playlist.id!,
},
extra: playlist,
);
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(),
],
),
),
],
),
),
);
},
),
),
),