CalvinBackup/SpotiFLAC-Mobile
1
0 Fork 0
mirror of https://github.com/zarzet/SpotiFLAC-Mobile.git synced 2026-09-30 21:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(home): add large featured cards for extension feeds

Browse Source
This commit is contained in:
zarzet committed 2026-09-21 18:38:04 +07:00
1 parent ed80d3e8bb
commit 5958fe2719
5 files changed
+278
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/widgets/explore_featured_section.dart
+167
View File
@@ -0,0 +1,167 @@
import 'package:flutter/material.dart';
import 'package:spotiflac_android/providers/explore_provider.dart';
import 'package:spotiflac_android/widgets/cached_cover_image.dart';
/// Large editorial cards requested by a home-feed provider.
class ExploreFeaturedSection extends StatelessWidget {
final ExploreSection section;
final ValueChanged<ExploreItem> onItemTap;
const ExploreFeaturedSection({
super.key,
required this.section,
required this.onItemTap,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colors = theme.colorScheme;
final scaler = MediaQuery.textScalerOf(context);
return LayoutBuilder(
builder: (context, constraints) {
final width = (constraints.maxWidth - 48).clamp(160.0, 560.0);
final imageHeight = width / 1.5;
final headingHeight = scaler.scale(12) * 1.5;
final titleHeight = scaler.scale(22) * 1.4;
final artistHeight = scaler.scale(16) * 1.5;
final descriptionHeight = scaler.scale(14) * 1.5 * 2;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 20, 16, 12),
child: Text(
section.title,
style: theme.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
SizedBox(
height:
headingHeight +
titleHeight +
artistHeight +
imageHeight +
descriptionHeight +
24,
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: section.items.length,
separatorBuilder: (_, _) => const SizedBox(width: 12),
itemBuilder: (context, index) {
final item = section.items[index];
final image = item.featuredCoverUrl?.isNotEmpty == true
? item.featuredCoverUrl
: item.coverUrl;
final fallback = ColoredBox(
color: colors.surfaceContainerHighest,
child: Center(
child: Icon(
Icons.album_outlined,
size: 48,
color: colors.onSurfaceVariant,
),
),
);
return Semantics(
button: true,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => onItemTap(item),
child: SizedBox(
width: width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: headingHeight,
child: Text(
item.heading ?? '',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
height: 1.5,
fontWeight: FontWeight.w600,
color: colors.primary,
),
),
),
SizedBox(
height: titleHeight,
child: Text(
item.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 22,
height: 1.4,
),
),
),
SizedBox(
height: artistHeight,
child: Text(
item.artists,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
height: 1.5,
color: colors.onSurfaceVariant,
),
),
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: SizedBox(
width: width,
height: imageHeight,
child: image == null || image.isEmpty
? fallback
: CachedCoverImage(
imageUrl: image,
// Decode one axis so wide editorial art
// keeps its ratio on high-density screens.
memCacheWidth:
(width *
MediaQuery.devicePixelRatioOf(
context,
))
.ceil()
.clamp(320, 960),
fit: BoxFit.cover,
placeholder: (_, _) => fallback,
errorWidget: (_, _, _) => fallback,
),
),
),
const SizedBox(height: 8),
Text(
item.description ?? '',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
height: 1.5,
color: colors.onSurfaceVariant,
),
),
],
),
),
),
);
},
),
),
],
);
},
);
}
}