Files
Eventify-frontend/lib/widgets/skeleton_loader.dart
Sicherhaven fe8af7cfe6 feat: Phase 2 — 11 high-priority gaps implemented across home, auth, gamification, profile, and event detail
Phase 2 gaps completed:
- HOME-001: Hero slider pause-on-touch (GestureDetector wraps PageView)
- HOME-003: Calendar bottom sheet with TableCalendar (replaces custom dialog)
- AUTH-004: District dropdown on signup (14 Kerala districts)
- EVT-003: Mobile sticky "Book Now" bar + desktop CTA wired to CheckoutScreen
- ACH-001: Real achievements from dashboard API with fallback defaults
- GAM-002: 3-card EP row (Lifetime EP / Liquid EP / Reward Points)
- GAM-005: Horizontal tier roadmap Bronze→Silver→Gold→Platinum→Diamond
- CTR-001: Submission status chips (PENDING/APPROVED/REJECTED)
- CTR-002: +EP badge on approved submissions
- PROF-003: Gamification cards on profile screen with Consumer<GamificationProvider>
- UX-001: Shimmer skeleton loaders (shimmer ^3.0.0) replacing CircularProgressIndicator

Already complete (verified, no changes needed):
- HOME-002: Category shelves already built in _buildTypeSection()
- LDR-002: Podium visualization already built (_buildPodium / _buildDesktopPodium)
- BOOK-004: UPI handled natively by Razorpay SDK

Deferred: LOC-001/002 (needs Django haversine endpoint)
Skipped: AUTH-002 (OTP needs SMS provider decision)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 16:51:30 +05:30

135 lines
3.8 KiB
Dart

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
/// Generic shimmer rectangle with configurable dimensions and border radius.
class SkeletonBox extends StatelessWidget {
final double width;
final double height;
final double borderRadius;
const SkeletonBox({
Key? key,
this.width = double.infinity,
required this.height,
this.borderRadius = 8,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
return Shimmer.fromColors(
baseColor: isDark ? const Color(0xFF2D2D2D) : Colors.grey[300]!,
highlightColor: isDark ? const Color(0xFF3D3D3D) : Colors.grey[100]!,
child: Container(
width: width,
height: height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(borderRadius),
),
),
);
}
}
/// Shimmer placeholder for a compact event card (used in horizontal lists).
class EventCardSkeleton extends StatelessWidget {
const EventCardSkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
SkeletonBox(height: 140, borderRadius: 12),
SizedBox(height: 8),
SkeletonBox(height: 14, width: 160),
SizedBox(height: 6),
SkeletonBox(height: 12, width: 100),
],
),
);
}
}
/// Shimmer placeholder for a full-width event list row.
class EventListSkeleton extends StatelessWidget {
const EventListSkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 16),
child: Row(
children: const [
SkeletonBox(width: 64, height: 64, borderRadius: 10),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SkeletonBox(height: 14),
SizedBox(height: 8),
SkeletonBox(height: 12, width: 140),
],
),
),
],
),
);
}
}
/// Shimmer placeholder for hero carousel area.
class HeroCarouselSkeleton extends StatelessWidget {
const HeroCarouselSkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: SkeletonBox(height: 320, borderRadius: 24),
);
}
}
/// Shimmer grid for achievements tab.
class AchievementGridSkeleton extends StatelessWidget {
const AchievementGridSkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
mainAxisSpacing: 12,
crossAxisSpacing: 12,
padding: const EdgeInsets.all(16),
children: List.generate(4, (_) => const SkeletonBox(height: 160, borderRadius: 16)),
);
}
}
/// Shimmer placeholder for profile stat cards row.
class ProfileStatsSkeleton extends StatelessWidget {
const ProfileStatsSkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: List.generate(3, (_) => const Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 4),
child: SkeletonBox(height: 80, borderRadius: 12),
),
)),
),
);
}
}